WebGIS开发【智慧校园】实战案例：15. 地图点击事件的引入和点标记

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进来。可以添加很多个点标记。 
事实上，点标记是可以很灵活的，⽐如标记⼀个地物，钻孔，建筑物等。⽐如下⾯的天坛的地物标 记。就可以做的很漂亮。