Google Maps API v3, как изменить значок маркера при нажатии

Как я могу изменить значок маркера при нажатии на маркер (на событие click) и вернуть его обратно в обычный значок при нажатии на другой маркер?

7
google-maps-api-3 javascript

2 ответов

Я не проверял этот код, так что могут быть опечатки или ошибки, но это должно дать вам идею.

во-первых, определите обратный вызов, чтобы установить все маркеры на обычный значок (чтобы сбросить все ранее нажатые маркеры) и установить значок текущего нажатого маркера на выбранный значок:

var markerCallback = function() {
    for (var i=0; i<arrayOfMarkers.length; i++) {
        arrayOfMarkers[i].setIcon(normalIcon);
    }
    this.setIcon(selectedIcon);
 }

затем назначьте обратный вызов событию click на каждом маркере следующим образом:

google.maps.event.addListener(marker, 'click', markerCallback);

есть, конечно, некоторые улучшения кода, которые могут быть сделаны. Например, вы может не захочется normalIcon, selectedIcon и arrayOfMarkers быть глобальными переменными, как предполагает приведенный выше код. И если у вас много маркеров, вы, вероятно, хотите вместо этого отслеживать ранее выбранный маркер, а не иметь for loop сбросьте значок на каждом из них.

но, как я сказал, это должно дать вам идею.

8

в любом случае, кто-то хочет увидеть пример отслеживания предыдущего маркера в глобальной переменной, такой как упомянутый Каспер, вот что я сделал:

google.maps.event.addListener(marker,'click',function() {

        if (selectedMarker) {
            selectedMarker.setIcon(normalIcon);
        }
        marker.setIcon(selectedIcon);
        selectedMarker = marker;
    });

(после установки selectedMarker в качестве глобальной переменной)

14