零基础WebGIS开发入门 | 地图控件与点标记交互

继续webgis开发的零基础入门教程，今天讲两个核心功能：地图控件 和点标记。

一、地图控件：

很多人以为缩放按钮、比例尺是地图自带的。其实不是，高德API默认啥控件都没有，需要你自己一个个加。

常用控件有哪些？

控件	功能	代码
ToolBar	缩放、平移控制条	`new AMap.ToolBar()`
Scale	左下角比例尺	`new AMap.Scale()`
HawkEye	右下角鹰眼缩略图	`new AMap.HawkEye()`
MapType	标准/卫星图切换按钮	`new AMap.MapType()`
ControlBar	3D视角控制罗盘	`new AMap.ControlBar()`

怎么加？插件化加载

高德API用AMap.plugin()按需加载控件，避免一次性加载所有资源：

javascript 复制代码

AMap.plugin([
    'AMap.ToolBar',
    'AMap.Scale',
    'AMap.HawkEye',
    'AMap.MapType',
    'AMap.ControlBar'
], function() {
    // 加载完成后，逐个添加到地图
    map.addControl(new AMap.ToolBar());      // 工具条
    map.addControl(new AMap.Scale());        // 比例尺
    map.addControl(new AMap.HawkEye());      // 鹰眼
    map.addControl(new AMap.MapType());      // 地图类型切换
    map.addControl(new AMap.ControlBar());   // 控制条
});

注意：控件是插件，先plugin()加载，再addControl()添加。如果直接new会报错，因为控件代码还没加载进来。

二、点标记

地图能显示了，控件也加了，接下来要往上面放东西。**点标记（Marker）**可以理解为地图覆盖物，就是地图上那个红色图钉，用来标位置。

实际操作过程中，会⽤⼀个图形来表示。根据经纬度去创建marker，这就是点标记，然后再添加到地图上就可以，现在把他做成交互式的。

1. 点击事件：获取经纬度

绑定click事件，点击地图时获取当前位置的经纬度：

javascript 复制代码

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

这⾥注意：在控制台打印时候，字符串时，用的是反引号 `````（键盘1左边那个键），不是单引号。否则模板字符串的变量插值不会生效。

看⼀下效果：

这就实现了在控制台输出经纬度的操作。

2. 结合点击事件，实时添加标记

⾸先基于坐标来绘制点。

代码：

javascript 复制代码

// 添加点
// 创建marker对象
var marker = new AMap.Marker({
    position: new AMap.LngLat(114.255025, 30.62157)
})
// 添加到地图
map.add(marker)

上⾯的例⼦，只能是先指定经纬度画点，我们也可以结合地图事件达到实时点击画点，效果如下：

实现代码：

javascript 复制代码

// 监听地图点击事件
map.on('click', function(event){
    // console.log(event)
    // console.log(`经度: ${event.lnglat.lng},纬度: ${event.lnglat.lat}`)
    // 创建marker对象
    var marker = new AMap.Marker({
        position: event.lnglat,
    })
    // 添加到地图
    map.add(marker)
})

这样就可以点击⼀次，添加⼀个marker进来。可以添加很多个点标记。

事实上，点标记是可以很灵活的，⽐如标记⼀个地物，钻孔，建筑物等。

⽐如下⾯的天坛的地物标记。就可以做得很漂亮。

总结：

本篇讲了点标记，能在地图上插上图钉。

但GIS不只是标点，还要画线、画面、画范围。下一期讲几个核心图形：折线、多边形、圆形、矩形，以及怎么在线编辑。