关闭标记信息窗口并在单击时更改标记颜色

close marker infowindow and change marker color on click

本文关键字：单击颜色窗口信息信息窗更新时间：2023-09-26

您好，我已经在stackoverflow上尝试了很多示例，但不确定我哪里出错了。我有一个带有一些标记的地图，工作正常（更改颜色并打开信息窗口，问题是我希望在选择新标记时将以前的标记更改回原始颜色关闭信息窗口。不知道我哪里出错了。

<script type="text/javascript">             
        $(document).ready(function(){
            var i=0;
            var currentInfoWin = null;
            var currentMarker = null;
            var mapOptions = {
                mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
            $.getJSON('map.php',function(data){
                if(data.success == true) {
                    if(data.CData.length > 0){
                        $.each(data.CData,function(index, d){
                        addMarker(currentMarker, currentInfoWin, map, d.Latitude, d.Longitude);
                        });
                    }
                }           
            });     
        });
        function addMarker(currentMarker, currentInfoWin, map, Active, Lat, Lng){
            if (Lat != null && Lng != null){
                var LatLng = new google.maps.LatLng(Lat, Lng);                                      
                var marker = new google.maps.Marker({
                    position: LatLng,
                    map: map,
                    icon:{
                        path: google.maps.SymbolPath.CIRCLE,
                        scale: 5.0,
                        fillColor: "#F00",
                        fillOpacity: 0.7,
                        strokeWeight: 0.4
                    },
                });
                var content = '<div class="">test</div>';
                var infowindow = new google.maps.InfoWindow({ 
                    content: content,
                    maxWidth: 370
                });
                google.maps.event.addListener(marker, 'click', function (){
                    resetInfoWindow(currentInfoWin,currentMarker);
                    marker.setIcon({
                        path: google.maps.SymbolPath.CIRCLE,
                        scale: 5,
                        fillColor: "#00F",
                        fillOpacity: 0.7,
                        strokeWeight: 0.4
                    });
                    infowindow.open(map, marker);
                    currentInfoWin = infowindow;
                    currentMarker = marker;
                });             
            }               
        }
        function resetInfoWindow(currentInfoWin,currentMarker){
            if(currentInfoWin!==null){
                currentInfoWin.close();
                currentMarker.setIcon({
                    path: google.maps.SymbolPath.CIRCLE,
                    scale: 5,
                    fillColor: "#F00",
                    fillOpacity: 0.7,
                    strokeWeight: 0.4
                });
            }
        }
    </script>

所以我想通了：我将标记和信息窗口放在一个数组中，在打开和设置新标记之前使用单击循环重置所有标记......还删除了重置信息窗口功能。不确定这是否是最有效的方式，请插话。再次感谢！

google.maps.event.addListener(marker, 'click', function (){
    for (var i = 0; i < MarkerArray.length; i++) {
         MarkerArray[i].setIcon({
             path: google.maps.SymbolPath.CIRCLE,
             scale: 5,
             fillColor: "#F00",
             fillOpacity: 0.7,
             strokeWeight: 0.4
         });
      InfoWindowArray[i].close();
    }
    marker.setIcon({
        path: google.maps.SymbolPath.CIRCLE,
        scale: 5,
        fillColor: "#00F",
        fillOpacity: 0.7,
        strokeWeight: 0.4
    });
    infowindow.open(map, marker);
});