最近在捣鼓腾讯地图,然后,产品经理要求——Marker的状态有2种,选中和未选中。当我点击其中一个标注的时候,样式就更替的选中样式,如果之前有选中的就恢复成未选中样式。
尝试了几种我所想的办法,都不行;开发文档上也没有。特来求助各位,如果这能实现,该怎么实现?最好有代码可以让我参考一下~
const latlngs = [];
const test = [];
let datas;
if (this.allProjects) {
datas = this.allProjects;
for (let j = 0; j < this.allProjects.length; j++) {
latlngs.push(new qq.maps.LatLng(this.allProjects[j].maLat, this.allProjects[j].maLng));
test.push(new qq.maps.LatLng(this.allProjects[j].maLat, this.allProjects[j].maLng));
}
}
for (let i = 0; i < latlngs.length; i++) {
// 判断,以便显示不一样的图标
if (this.allProjects[i].hasParkingLot()) {
let marker = new qq.maps.Marker({
icon: noSelectedIcon,
position: latlngs[i],
map: this.map
});
qq.maps.event.addListener(marker, 'click', () => {
infoWin.open();
infoWin.setContent('<div style="text-align:center;white-space:' +
'nowrap;margin:10px;font-size:0.2rem;">这是' +
datas[i].maName + '</div>');
infoWin.setPosition(latlngs[i]);
this.map.panTo(latlngs[i]); // 移动地图中心
this.selectedProject = datas[i];
// debugger
this.markerSelect = marker;
marker.setIcon(selectedIcon);
});
}
}
就是这样子,按照腾讯地图给的API以及示例方法,我将坐标组里面的点都循环显示出来,于是,每一个点击的marker都是点击到的单个信息并不是好几个含在其中。但是,每次一更改图标设置marker.setIcon都是一次性修改全部,无语了。
这种怎么破解?
你这个没看出有什么问题。点击marker就只会更改被点击的icon,不会更改其他marker,下面的测试就没用问题
<div id="container" style="height:500px"></div>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
<script>
var center = new qq.maps.LatLng(39.916527, 116.397128);
var map = new qq.maps.Map(document.getElementById('container'), {
center: center,
zoom: 13
});
var lnglats = [new qq.maps.LatLng(39.916527, 116.397128)
, new qq.maps.LatLng(39.916437, 116.386328)
, new qq.maps.LatLng(39.916347, 116.375428)];
for (var i = 0; i < lnglats.length; i++) {
let mk = new qq.maps.Marker({
icon: 'http://www.w3dev.cn/theme/w3dev.gif',
position: lnglats[i],
map: map
});
mk.selected = false;
qq.maps.event.addListener(mk, 'click', function () {
mk.selected = !mk.selected
mk.setIcon(mk.selected ? 'http://lvyou168.cn/police.png' : 'http://www.w3dev.cn/theme/w3dev.gif')
});
}
</script>
好吧,刚提问,就看到有一篇这样的文章了。
不过,这个解决办法是JAVA的,但是,逻辑是一样一样的。可行。
https://blog.csdn.net/baidu_29512909/article/details/50481169
设置一个变量保存下来之前改变的marker的id和样式,在点击新marker的事件时让旧的marker也改变