javascript - 鼠标悬停在 div 上时更改标记图标

Question

当用户将鼠标悬停在 div 标签上时，我想更改标记图标。我找到了一个接近的解决方案，当用户将鼠标悬停在标记本身上时，标记图标会发生变化。但我想使用 div 标签更改它。

代码:

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);
});

我的设置应该是这样的:

   <div class="sth" onmouseover="ShowMarker(id)" />

还有我的 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);
    });

}

此代码应仅按 id 更改选定的标记。 任何人都可以将我的代码更改为有效代码吗？我真的很感激。

提前致谢。

Answer 1

你必须在你想要的 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>

然后将你的标记放入另一个变量中，并在其上循环:

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;
        }
    }
}

...

我做了一个demo , 带有评论。希望对您有所帮助:)