WebGIS开发入门到进阶 | 高德地图打卡功能实现教程

前面我们学习了监听地图的click事件实现了在地图上点击新增热门标记点的功能。那么这节前面我们学习了监听地图的click事件实现了在地图上点击新增热门标记点的功能。那么这节课我们利用上一节 GeoJSON 数据持久化来实现标记点的保存功能以实现打卡功能——能在标记点显示打卡次数标记点不会消失就算重启浏览器也能保存。那么怎么来实现打卡功能呢这就需要监听标记点的点击事件了。今天我们要实现的是监听标记点的点击事件语法与监听地图点击事件非常相似。一、监听标记点的点击事件现在就来实现下监听标记点的点击事件一样的语法marker.on(click, function(e) { // 点击标记时执行的代码 })当点击标记时就能启动 function 中的代码。这里的marker就是我们创建或已有的标记点对象。为了保存打卡次数需要对标记点进行属性赋值这时候就需要对 GeoJSON 进行修改。在创建标记时我们通过extData来添加自定义属性var marker new AMap.Marker({ // 创建标记 position: e.lnglat, extData: { _geoJsonProperties: { gid: geojson.getOverlays().length 1, click: 0, } } })这里设置了gid就是标记序号属性从 1 开始还有点击属性click用来记录点击次数初始值为 0。需要注意的是_geoJsonProperties是 GeoJSON 数据中用来存储自定义属性的标准字段名高德地图 SDK 在导入导出 GeoJSON 时会自动识别这个字段。二、为新标记点绑定点击事件创建 marker 后还要给 marker 创建绑定事件。注意这是写在map.on(click)事件中的。语法就是上面的写法map.on(click, function(e) { // 创建标记 var marker new AMap.Marker({ position: e.lnglat, extData: { _geoJsonProperties: { gid: geojson.getOverlays().length 1, click: 0, } } }) // 为新标记绑定点击事件 marker.on(click, function(e) { // 点击时执行的逻辑 }) })这样就只有对新创建的 marker 才绑定了点击事件。每次用户点击地图新增一个标记时这个新标记就拥有了点击打卡的功能。三、为旧标记点绑定点击事件但是对于已有的 marker 就没办法监听了。因为上面这种方式只对新创建的标记有效那些已经保存在本地、重启浏览器后重新加载出来的旧标记点还没有绑定点击事件。这时候还要对已有的 marker 绑定。已有的 marker 都是通过importData的方式拿到的。这时候就需要在导入的时候就对这些已有的数据进行绑定点击事件// 导入数据 if (JSON.stringify(getData()) ! []) { // 判断 localStorage 是否有数据 geojson.importData(getData()) // 导入数据 geojson.eachOverlay(function(item) { // 遍历所有标记 item.on(click, function(e) { // 为每个标记绑定点击事件 console.log(e) }) }) map.add(geojson) // 将 geojson 添加到地图 }函数里的item就是旧的数据的每一项这样就给每个 marker 都绑定点击事件了。这里eachOverlay是 GeoJSON 对象提供的一个遍历方法它会依次处理 geojson 中的每一个覆盖物即每一个标记点。四、实现打卡次数累加逻辑设置好事件后就需要实现当用户点击标记时点击属性加 1。这时候就在事件中实现var ext marker.getExtData() // 获取扩展数据 var click ext._geoJsonProperties.click // 点击次数加 1这个意思就是先获取 extData 属性值赋予 ext 变量然后从中提取click属性当点击时候就加 1然后赋值给 click 变量。同样的内容也得给旧标记点再来一次复制过去即可item.on(click, function(e) { var ext item.getExtData() var click ext._geoJsonProperties.click }这就实现了新旧点在点击时都能让click属性加 1。注意如果调试时需要先把已有的 geojson 存储删除因为这里已经改变了 geojson 的结构已有的数据是没有这些属性的。可以在浏览器控制台执行localStorage.removeItem(geoData)来清除旧数据。五、数据持久化保存实现上述步骤后还有个问题就是click的值并没有实现在本地存储 geojson 数组中的保存。也就是说虽然点击时内存中的click值增加了但如果刷新页面打卡次数会丢失。所以还得加上一句saveData(geojson.toGeoJSON())这样才能实现在 localStorage 中的保存。geojson.toGeoJSON()方法会将当前所有标记点及其属性数据导出为标准 GeoJSON 格式然后通过saveData函数存储到浏览器本地。同样的这个操作也需要在新旧标记都要进行一遍新标记的点击事件marker.on(click, function(e) { var ext marker.getExtData() var click ext._geoJsonProperties.click saveData(geojson.toGeoJSON()) // 保存到本地 })旧标记的点击事件item.on(click, function(e) { var ext item.getExtData() var click ext._geoJsonProperties.click saveData(geojson.toGeoJSON()) // 保存到本地 })六、使用信息窗口显示打卡次数这样就实现了打卡功能但是打卡次数现在是在控制台输出的如何让用户看见呢这样就需要使用信息框了。思路就是把console.log替换成消息框的显示模式// 使用消息提示框 var infowindow new AMap.InfoWindow({ anchor: top-center, // 信息窗口锚点位置 content: div打卡了${click}次/div // 模板字符串显示打卡次数 })这里使用了 ES6 的模板字符串语法将click变量的值动态嵌入到 HTML 内容中。anchor: top-center表示信息窗口的锚点位于顶部中间位置。这样来实现消息的显示注意这个也是在map.on里实现的。接下来就是显示// 打开信息窗 infowindow.open(map, marker.getPosition())就是实现了消息窗在哪里显示。marker.getPosition()获取标记点的经纬度坐标信息窗口就会在这个位置弹出。当然新旧标记都要来实现一遍新标记的完整点击事件marker.on(click, function(e) { var ext marker.getExtData() var click ext._geoJsonProperties.click saveData(geojson.toGeoJSON()) var infowindow new AMap.InfoWindow({ anchor: top-center, content: div打卡了${click}次/div }) infowindow.open(map, marker.getPosition()) })旧标记的完整点击事件item.on(click, function(e) { var ext item.getExtData() var click ext._geoJsonProperties.click saveData(geojson.toGeoJSON()) var infowindow new AMap.InfoWindow({ anchor: top-center, content: div打卡了${click}次/div }) infowindow.open(map, item.getPosition()) })七、常见问题解答7.1 为什么点击标记时候不会触发地图的 click 事件这是一个容易被忽略的问题。在高德地图中点击标记点时事件被标记捕获并处理不会冒泡到地图层。因此map.on(click)事件不会被触发。这正是为什么我们需要单独为标记点绑定click事件来处理打卡逻辑。7.2 调试时需要注意什么如果调试时发现旧标记点点击没有反应或者打卡次数不显示可能是因为之前存储的 GeoJSON 数据中没有_geoJsonProperties这个属性结构。建议在调试前先清除已有的本地存储数据然后在控制台执行location.reload()刷新页面重新添加标记点进行测试。八、总结通过本节课的学习我们实现了以下功能✅ 通过marker.on(click)监听标记点的点击事件✅ 使用extData._geoJsonProperties为标记点添加click属性记录打卡次数✅ 通过geojson.eachOverlay()遍历旧标记点并绑定点击事件✅ 使用geojson.toGeoJSON()和saveData()实现数据的持久化保存✅ 使用AMap.InfoWindow在标记点位置显示打卡次数信息至此一个完整的打卡功能就实现了。用户添加的每个标记点都支持打卡记录次数会累加显示并且所有数据在浏览器重启后依然存在。大家可以先自己上手尝试看看。如果有不明白或者看不懂的地方戳我WebGIS开发零基础入门系列教程持续更新中关注我们不错过后面的内容更新