GIS学习之WebGIS开发基础(二)：快速上手高德 JSAPI

注册账号并申请 key

高德地图官网：https://lbs.amap.com/

开始使用高德 JSAPI 之前，我们要拿到一个 key 才可以。首先注册账号（https://console.amap.com/dev/index）然后进图应用管理 -> 我的应用 -> 创建新应用 -> 添加 key 就可以生成 key 和安全密钥了，具体方法参考我的上一篇文章。

记住这个 Key ，等会要用，以后可能也会用，目前高德 key 新增安全密钥，是为了提升广大用户的对自己的key安全有效管理，降低明文传输被窃取的风险，建议每次加上。

快速上手

完成页面准备工作之后就可以真正开始地图的开发工作了。本篇带您快速了解：地图、图层、事件、点标记的最基本使用方法。对于矢量图形、信息窗体会在下一篇文章进行精讲。

---

HELLO，AMAP

地图显示是 GIS 开发的第一步。首先我们需要通过代码，将地图显示出来，后续所有的操作都是基于这个底图进行的。图中显示各部分代码书写位置。

构建地图过程

1. 引入 JSAPI

这里只演示了 key 搭配静态安全密钥的方法，在元素中添加以下代码。其他方法参考官方文档。

Tips: 记得将您的安全密钥「您申请的安全密钥」替换为您的安全密钥，将您申请的key 值替换为 key，有时候可以不使用安全密钥，相关方法可见下文。

2. 添加div标签作为地图容器

同时要为

设置宽度和高度，否则页面高度撑不开，直接不显示：

另外一种写法是

3. 创建一个地图( JSAPI 的加载)

简单创建一个地图只需要一行代码，构造参数中的container为准备阶段添加的地图容器的id:

示例

创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性:

ok ，到这里地图应该能够在浏览器中显示了，但有时会因为资源加载缓慢，出现地图加载不出来问题：

解决方法是把这一句写到 body 中，代码如下：

你得到了一个地图：

Map 类常见的属性参数

• center：中心点经纬度

• zoom：缩放比例

• viewMode：显示2D还是3D

• zooms：地图显示的缩放级别范围(3~18)

• mapStyle：地图的显示样式或风格，可用自定义地图样式或者官方样式模板

• ...

在官方文档参考手册旧版和新版中均有说明。

学习进阶：三个概念

---

图层

更丰富内容可以查看官方文档的高德官方图层：

官方图层种类

• 标准图层 TileLayer

• 卫星图层 TileLayer.Satellite

• 路网图层 TitleLayer.RoadNet

• 实时交通图层 TitleLayer.Traffic

• 楼块图层 Buildings

• 室内地图图层 IndoorMap

图层的添加

默认情况下，地图只显示标准底图，如需要叠加别的图层，可以通过map.add方法添加图层：

也可以在地图初始化的时候通过layers属性为地图设置多个图层：

var map = new AMap.Map('container', {
        center: [116.397428, 39.90923],
        layers: [//使用多个图层
            new AMap.TileLayer.Satellite(),
            new AMap.TileLayer.RoadNet()
        ],
        zooms: [4,18],//设置地图级别范围
        zoom: 13
    });

在浏览器Ctrl+shift+i在后台输入代码可以实现图层的隐藏和添加：

实现显示和隐藏实时路况的图层的按钮

地图控件

更丰富内容可以查看官方文档的地图控件：

什么是地图控件

地图控件就是可以用来控件地图显示的工具，包括地图基础控件和 UI 组件库实现地图基础控件两种添加方式，这里只介绍第一种。

常见的地图控件

工具条、比例尺、定位、鹰眼、基本图层切换五种。

使用步骤地图参数 Map 类的构造参数

在高德API中，控件通常以插件的形式做为扩展，有两种使用方式的使用步骤如下：

(一) 调用函数的方式

1. 调用plugin

2. 添加控件到地图

示例

(二) 调用函数的方式

1. 引入插件资源

2. 实例化插件对象

3. 添加插件

官方示例

这里显示了另外一种使用官方资源文件的形式，稍微不同之处是引用了css和js文件，没有应用安全密钥，有兴趣请查看官方示例文档 JS API 2.0 示例

    
    
    
    
    
    
    
    
    
    




    

        比例尺
    
    
    

        工具条
    
    
    

        工具条方向盘
    
    
    

        显示鹰眼
    

地图的交互与事件

更丰富内容可以查看官方 JSAPI 文档的地图的交互与事件：

地图事件是什么

对于地图而言，当点击地图时，会触发一个地图的点击事件。进而会调用对应的事件处理函数，在事件处理函数中，可以获取事件对象，事件对象包括了很多信息，其中最主要的就是经纬度。

示例

// 六、监听地图的点击事件
 map.on('click', function(event) {
    console.log(`经度: ${event.lng}, 纬度: ${event.lng}`)
 })

点击地图任一点，浏览器后台打印经纬度：

事件系统

除了地图展示外，当我们在地图上进行操作时，少不了要对各种交互事件进行处理。本章将向您介绍地图的事件系统，其中包含如下内容：

• 事件绑定及解绑

• MapsEvent 对象

• 地图事件

• 覆盖物事件

点标记

点标记是地图事件之一，是用来标示某个位置点信息的一种地图要素，根据点标记的呈现方式，分为以下几种：

• 点标记 Marker

• 灵活点标记 ElasticMarker

• 圆形标记 CircleMarker

• 文本标记 Text

Marker 类型推荐在数据量为 500 以内时使用。若数据量大于 500 ，推荐使用 LabelMarker，可以获得更好的性能。另外需要地图标注可以避让用户标注时，也推荐使用LabelMarker。

点标记使用方式

以点标记 Marker 为例使用方式有两种：

(一) 创建一个默认图标的点标记

当点击地图时，我们可以根据经纬度绘制一个点，添加到地图中：

// 1. 创建一个点对象Marker
        var marker = new AMap.Marker({
            position: new AMap.LngLat(114.255025, 30.62157),   
            // 经纬度对象，也可以是经纬度构成的一维数组[114.255025, 30.62157]
            title: '汉口'
        });
        // 2. 添加到地图
        map.add(marker);
        // 3. 移除已创建的marker
        map.remove(marker);

也可以一次添加多个点标记到地图实例（其它覆盖物均可使用此方式）：

// 多个点实例组成的数组
var markerList = [marker1, marker2, marker3];

map.add(markerList);

(二) 交互式绘制

示例

// 二、交互式创建点标记
 map.on('click',function (e) {
    console.log(e)
    //1.创建一个点对象Marker
    var marker = new AMap.Marker({
    position: e.lnglat,
 	})
 	//2.添加到地图
	map.add(marker)
})

点标记自定义用法

作业：灵活点标记 ElasticMarker

灵活点标记是可随地图级别变化而改变图标和大小的点标记。可满足用户在地图缩放到不同级别有不同展示效果的需求。

代码