[英]Change marker icon on mouseover a div
I would like to change the marker icon, when the user hovers his mouse over a div tag. 当用户将鼠标悬停在div标签上时,我想更改标记图标。 I found a close solution, where the marker icon changes when the user hovers his mouse over the marker itself.
我找到了一个解决方案,当用户将鼠标悬停在标记本身上时,标记图标会发生变化。 But I would like to change it using div tags.
但我想使用div标签进行更改。
The code: 编码:
var icon1 = "imageA.png";
var icon2 = "imageB.png";
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
id: 1,
icon: icon1,
title: "some marker"
});
google.maps.event.addListener(marker, 'mouseover', function() {
marker.setIcon(icon2);
});
google.maps.event.addListener(marker, 'mouseout', function() {
marker.setIcon(icon1);
});
My set up shall look like this: 我的设置应如下所示:
<div class="sth" onmouseover="ShowMarker(id)" />
And my JS sth like: 和我的JS一样:
var icon1 = "imageA.png";
var icon2 = "imageB.png";
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
id: 1,
icon: icon1,
title: "some marker"
});
function ShowMarker(id) {
google.maps.event.addListener(marker, 'mouseover', function() {
marker[id].setIcon(icon2);
});
google.maps.event.addListener(marker, 'mouseout', function() {
marker[id].setIcon(icon1);
});
}
This code should change only the selected marker by id. 此代码应仅通过ID更改所选标记。 Could anyone change my code to a working one?
有人可以将我的代码更改为有效代码吗? I would really appreciate it.
我真的很感激。
Thanks in advance. 提前致谢。
You have to make a listener on the div you want : 您必须在想要的div上创建一个侦听器:
<div class="sth" onmouseover="hover(1)" onmouseout="out(1)">MARKER 1</div> <div class="sth" onmouseover="hover(2)" onmouseout="out(2)">MARKER 2</div>
Then push your markers in another variable, and loop on it : 然后将标记推入另一个变量,并在其上循环:
var allMarkers = [];
var marker = new ...();
allMarkers.push(marker);
function hover(id) {
for ( var i = 0; i< allMarkers.length; i++) {
if (id === allMarkers[i].id) {
allMarkers[i].setIcon(icon2);
break;
}
}
}
...
I've done a demo , with comments. 我已经完成了演示 ,并提供了评论。 Hope it helps :)
希望能帮助到你 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.