WebGIS开发【智慧校园】实战案例：19. 项目实战（二）

这就是这⼀课的成品，实现了打卡功能，能在标记点显示打卡次数。标记点不会消失，就算重启浏览器也能保存。 
书接上回，我们⽤geojson实现了标记点的保存，那么怎么来实现打卡功能呢，这就需要监听标记点的点 击事件了。 
上⼀节说的是监听map的点击事件，实现了新增热⻔标记点的功能，现在就来实现下监听标记点的点击 事件，⼀样的语法： 

marker.on('click',function(e){} 

当点击标记时，就能启动function。为了保存打卡次数，需要对标记点进行属性赋值，这时候就需要对 geojson进行修改： 

var marker = new AMap.Marker({  // 创建标记 
position:e.lnglat, 
extData:{ 
_geoJsonProperties:{ 
gid: geojson.getOverlays().length+1, 
click:0, 
}, 
} 
}) 

这里设置了gid就是标记序号属性，从1开始；还有点击属性，用来记录点击次数，初始值为0。
创建marker后，还要给marker创建绑定事件。注意，这是写在map.on事件中的。语法就是上面的写法。 这样，就只有对新创建的marker才绑定了点击事件。 
但是，对于已有的marker就没办法监听了，这时候，还要对已有的marker绑定。 
已有的marker都是通过importData的⽅式拿到的。这时候就需要再导⼊的时候，就对这些已有的数据进行绑定点击事件。 

// 导⼊数据 
if(JSON.stringify(getData()) != '[]'){ // 判断local是否有数据
 geojson.importData(getData()) //导⼊数据 
geojson.eachOverlay(function(item){ 
item.on('click',function(e){ 
console.log(e) 
}) 
} 
map.add(geojson)   // 将geojson添加到地图 

函数⾥item就是旧的数据的每⼀项，这样就给每个marker都绑定点击事件了。这⾥eachOverlay是 ⼀个对geojson进⾏遍历的⽅法。 
设置好事件后，就需要实现，当⽤户点击i标记时，点击属性加1.这时候就在事件中实现： 

var ext = marker.getExtData() 
var click = ++ext._geoJsonProperties.click 

这个意思就是先获取extdata属性值赋予ext变量，然后从中提取click属性，当点击时候，就加1， 然后赋值给click变量。 
同样的内容，也得给旧标记点在来⼀次，复制过去即可。

item.on('click',function(e){ 
var ext = item.getExtData() 
var click = ++ext._geoJsonProperties.click 
}

这就实现了新旧点在点击时都能让click属性加1. 
注意：如果调试时，需要先把已有的geojson存储删除，因为这⾥已经改变了geojson的结构，已有的数 据是没有这些属性的。 
实现上述步骤后，还有个问题，就是click的值并没有实现在本地存储geojson数组中的保存，所以还得加 上⼀句： 

saveData(geojson.toGeoJSON()) 

这样才能实现在localstorage中的保存。 
同样的这个操作也需要在新旧标记都要进行⼀遍。 
这样就实现了打卡功能，但是，打卡次数现在是在控制台输出的，如何让用户看见呢，这样就需要 使用信息框了。 
思路就是把console.log替换成消息框的显示模式。 

// 使⽤消息提示框 
var infowindow = new AMap.InfoWindow({
 anchor:'top-center',//模板字符串 
content:`<div>打卡了${click}次</div>`, 
}) 

这样来实现消息的显示，注意，这个也是在map.on⾥实现的，接下来就是显示： 

// 打开信息窗 
infowindow.open(map,marker.getPosition()) 

就是实现了消息窗在哪⾥显示。当然，新旧标记都要来实现⼀遍。 
有个小问题：为什么点击标记时候，不会触发点击map时候的新加标记的事件？