鼠標懸停時更改標記圖標

當用戶將鼠標懸停在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。任何人都可以將我的代碼更改爲正常工作嗎？我真的很感激它。

在此先感謝。

來源

2015-07-03 Tibor

[更改google地圖標記時onmouseover div（Google地圖v3 api）]的圖標（http://stackoverflow.com/questions/6049636/change-icon-of-google-map -marker-when-onmouseover-div-google-maps-v3-api） – geocodezip

你必須讓你想在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，附帶評論。希望它有助於:)

來源

2015-07-03 13:41:40

謝謝你的快速回答。我注意到你的代碼不幸地改變了這兩個標記。我想只改變一個特定的標記，這就是爲什麼我給了id：property。 :) – Tibor

對不起，這裏的解決方案，我希望[DEMO]（http://jsfiddle.net/mzhnvcnh/1/）^^ （我更新上面的答案） –

完美謝謝 – Tibor

鼠標懸停時更改標記圖標

回答

相關問題