當鼠標懸停或更改圖標標記

Question

我想要的是當用戶做鼠標懸停（懸停）然後圖標更改。我的代碼如下：

handler = Gmaps.build("Google", { 
markers: { 
    maxRandomDistance: null 
} 
}); 
handler.buildMap({ 
provider: {}, 
internal: { 
    id: "map-canvas" 
} 
}, function() { 
var markers; 
markers = handler.addMarkers(ar); 
_.each(ar, function(json, index) { 
    json.marker = markers[index]; 
    $(".location-" + json.id).on("mouseover", function() { 
    json.picture = { 
     url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png", 
     width: 36, 
     height: 36 
    }; 
    json.marker.setMap(handler.getMap()); 
    json.marker.panTo(); 
    handler.removeMarker(json.marker); 
    handler.addMarker(json); 
    }).on("mouseout", function() { 
    json.picture = ''; 
    handler.removeMarker(json.marker); 
    handler.addMarker(json); 
    }); 
}); 
handler.bounds.extendWith(markers); 
handler.fitMapToBounds(); 
}); 

使用此代碼，標記的顏色可以從紅色變爲綠色。但是，當用戶將鼠標從懸停區域移開時，顏色不會變回原始顏色。請任何人都可以在這個問題上建議我？

感謝

Answer 1

試着這麼做：

_.each(ar, function(json, index) { 

    var json.marker = markers[index]; 
    var initialPicture = json.picture; 
    var hoverPicture = { 
    url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png", 
    width: 36, 
    height: 36 
    } 

    $(".location-" + json.id).on("mouseover", function() { 
    json.picture = hoverPicture; 
    json.marker.setMap(handler.getMap()); 
    json.marker.panTo(); 
    handler.removeMarker(json.marker); 
    handler.addMarker(json); 
    }).on("mouseout", function() { 
    json.picture = initialPicture; 
    handler.removeMarker(json.marker); 
    var newMarker = handler.addMarker(json); 
    json.marker = newMarker; 
    }); 
}); 

Answer 2

海感謝@apneadiving答案。我修改我的代碼，這

hoverPicture = { 
url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png", 
width: 33, 
height: 33 
}; 
handler = Gmaps.build("Google", { 
markers: { 
    maxRandomDistance: null 
} 
}); 
handler.buildMap({ 
provider: {}, 
internal: { 
    id: "map-canvas" 
} 
}, function() { 
var markers; 
markers = handler.addMarkers(ar); 
_.each(ar, function(json, index) { 
    var gr; 
    json.marker = markers[index]; 
    gr = {}; 
    gr.marker = void 0; 
    $(".location-" + json.id).on("mouseover", function() { 
    gr = { 
     lat: json.lat, 
     lng: json.lng, 
     picture: hoverPicture 
    }; 
    json.marker.panTo(); 
    handler.removeMarker(json.marker); 
    gr.marker = handler.addMarker(gr); 
    }).on("mouseout", function() { 
    handler.removeMarker(gr.marker); 
    json.marker = handler.addMarker(json); 
    }); 
}); 
handler.bounds.extendWith(markers); 
handler.fitMapToBounds(); 
}); 

因此，新的圖標需要addMarker