WebGIS开发智慧校园（15）地图点击事件的引入和点标记

原创于 2025-11-07 17:52:11 发布 · 704 阅读

CC 4.0 BY-SA版权

文章标签：

+文末↓小助手，备注【智慧校园】无偿获取【完整版视频+笔记源码】

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) 

        })