点击一个按钮后，Google地图会更改图标

Question

当用户点击外部按钮时，我需要创建一个更改标记的交互式地图（我的地图有3个标记）

例如，当您打开网站时，地图就是这个：

单击按钮1时，仅更改此照片中的图标

你能帮我解决一下javascript代码吗？ :) 这是我的HTML代码

<div id="mapMeteo"></div>
<br>
<button id="btn1">Bottone1</button> <button id="btn2">Bottone2</button> <button id="btn3">Bottone3</button>

这是google的javascript代码：

<script>
    function initialize() {
        //Marker personalizzato
        var imageMM = 'images/markerMM.png';
            imageMMM = 'images/markerMMM.png';
            imageMC = 'images/markerMC.png';

        //mappa Meteo
        var mapMeteo = document.getElementById('mapMeteo');
        var Latlng = new google.maps.LatLng(42.9254851, 13.8632125);
        var mapMOptions = {
            center: Latlng,
            zoom: 12,
            mapTypeControl: false,
            draggable: false,
            scaleControl: false,
            scrollwheel: false,
            navigationControl: false,
            streetViewControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var mapM = new google.maps.Map(mapMeteo, mapMOptions);

        //Marker 1
        var marker1 = new google.maps.Marker({
            position: new google.maps.LatLng(42.9547985, 13.958793),
            map: mapM,
            icon: imageMMM
        });

        var marker2 = new google.maps.Marker({
            position: new google.maps.LatLng(42.9222113, 13.9199294),
            map: mapM,
            icon: imageMM
        });

        var marker3 = new google.maps.Marker({
            position: new google.maps.LatLng(42.8832739, 13.9438162),
            map: mapM,
            icon: imageMC
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

这是我的jquery代码，但不会更改图标

$("#btn1").click(function(){ google.maps.event.addListener(marker1, 'click', function() { marker1.setIcon(imageMM); infowindow.open(mapM); }); });

Answer 1

您可以使用dom侦听器和Marker类的setIcon方法。

https://developers.google.com/maps/documentation/javascript/reference#methods_48

例如：

var btn1 = document.getElementById('btn1');

google.maps.event.addDomListener(btn1, 'click', function() {

    marker1.setIcon(imageMC);
});

JSFiddle demo