Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/google-maps/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 关闭标记信息窗口并单击更改标记颜色_Javascript_Google Maps_Google Maps Api 3 - Fatal编程技术网

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

Javascript 关闭标记信息窗口并单击更改标记颜色,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,您好,我在stackoverflow上尝试了很多样本,但不确定哪里出了问题。我有一张带有一些标记的地图,效果很好(更改颜色并打开信息窗口问题是我希望在选择新标记时将以前的标记更改回原始颜色关闭信息窗口。不确定哪里出了问题 <script type="text/javascript"> $(document).ready(function(){ var i=0; var currentInfoWi

您好,我在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>

$(文档).ready(函数(){
var i=0;
var currentInfoWin=null;
var currentMarker=null;
变量映射选项={
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map(document.getElementById('map-canvas'),mapOptions);
$.getJSON('map.php',函数(数据){
if(data.success==true){
如果(data.CData.length>0){
$.each(data.CData,函数(index,d){
addMarker(currentMarker、currentInfoWin、地图、d.纬度、d.经度);
});
}
}           
});     
});
功能添加标记(currentMarker、currentInfoWin、map、Active、Lat、Lng){
如果(纬度!=null&&Lng!=null){
var LatLng=新的google.maps.LatLng(Lat,Lng);
var marker=new google.maps.marker({
位置:LatLng,
地图:地图,
图标:{
路径:google.maps.SymbolPath.CIRCLE,
比例:5.0,
填充颜色:“F00”,
不透明度:0.7,
冲程重量:0.4
},
});
var内容=‘测试’;
var infowindow=new google.maps.infowindow({
内容:内容,,
最大宽度:370
});
google.maps.event.addListener(标记,'click',函数(){
重置信息窗口(currentInfoWin、currentMarker);
marker.setIcon({
路径:google.maps.SymbolPath.CIRCLE,
比例:5,
填充颜色:“00F”,
不透明度:0.7,
冲程重量:0.4
});
信息窗口。打开(地图、标记);
currentInfoWin=infowindow;
currentMarker=标记;
});             
}               
}
函数resetInfoWindow(currentInfoWin、currentMarker){
如果(currentInfoWin!==null){
currentInfoWin.close();
currentMarker.setIcon({
路径:google.maps.SymbolPath.CIRCLE,
比例:5,
填充颜色:“F00”,
不透明度:0.7,
冲程重量:0.4
});
}
}

所以我想出来了:我将标记和信息窗口放在一个数组中,在打开和设置新标记之前,使用单击循环重置所有标记…还删除了重置信息窗口功能。不确定这是否是最有效的方法,请加入。再次感谢

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);
});
google.maps.event.addListener(标记,'click',函数(){
对于(变量i=0;i
您能提供示例数据吗?或者更好的是,一个演示您的问题的示例。Hi geocodezip;感谢您回复抱歉,我尽我所能/应该清理了所有代码。基本上,它通过一个循环读取JSON文件,然后每次调用addmarker函数。这将标记放在地图上。在add marke中r我还调用了打开信息窗口的click listener。在此之前,它调用resetinfowindow来检查是否有打开的窗口。关闭它,然后返回打开新窗口。问题是它“正在工作”在同一个标记上。因此,如果我单击标记A,它将打开,如果我单击标记B,它将打开。如果我再次单击标记A,它将关闭并打开…因此,我不知道如何保存上次单击的标记重置它并仅打开新的标记。我想我必须创建和排列标记,并单独调用addlistener?在循环之外?我似乎在这一点上有一个思维障碍。再次感谢!听起来这是一个可以通过函数闭包解决的问题。您仍然没有提供示例数据或