做了项目需要使用腾讯地图的jsapi,但是在做到多标记时发现,官方的文档只写了单个标记点击事件,如果是多个标记按官方文档的方法则会一直只显示最后一个
官方文档:
info.setPosition(marker.getPosition()); //标记Marker点击事件 qq.maps.event.addListener(marker, 'click', function() {
info.open();
info.setContent('<div style="text-align:center;white-space:nowrap;' + 'margin:10px;">单击标记</div>');
info.setPosition(marker.getPosition());
});
但是如果有多个标记,就需要每个标记都新建一个监听器
let markers = []
/* 新增marker之后 */
//获取标记的点击事件
for(let i=0;i<res.result.data.length;i++){
var marker = new qq.maps.Marker({
position: new qq.maps.LatLng(res.result.data[i].location.lat, res.result.data[i].location.lng),
map: map,
title: res.result.data[i].title
})
qq.maps.event.addListener(marker, 'click', function (res1) {
info.open();
info.setContent('<div style="text-align:center;white-space:nowrap;' +
'margin:10px;">' + res1.target.title +'</div>');
info.setPosition(res1.latLng);
});
markers.push(marker);
}
事件返回的res1会包含所点击的标记的位置,标题等等信息
详细api:https://lbs.qq.com/javascript_v2/doc/marker.html