WebGIS第六课：地图点击事件的引入和点标记

# 1 事件

如何通过点击事件来获取当前位置的经纬度？

可以通过事件来实现。

先上代码：这里有坑。

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

通过绑定click事件实现监听函数，这里注意：在控制台打印时候，字符串居然用的是·符号，就是1左边那个按键。否则是不对的。

看一下效果：

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

# 2 点标记

下面来看一下点标记。

点标记可以理解为地图覆盖物。会用一个图形来表示。根据经纬度去创建marker，这就是点标记，然后再添加到地图上就可以，现在把他做成交互式的。

首先基于坐标来绘制点。

代码：

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

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

 实现代码：

// 监听地图点击事件
        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进来。可以添加很多个点标记。

事实上，点标记是可以很灵活的，比如标记一个地物，钻孔，建筑物等。比如下面的天坛的地物标记。就可以做的很漂亮。