谷歌地图infowindow关闭不工作

Posted 2021-05-06

我有一张包含在this fiddle中的谷歌地图

当您单击引脚时，它们会按预期弹出一些信息，当您单击x时，它会关闭信息窗口。

但是，当我点击第一个引脚，然后单击其他引脚（不单击x）时，infowindows会一直弹出，而不会删除其他引脚。我怎样才能重构我的代码以使其正常工作？

html

    <div id="map_canvas"></div>

样式

    #map_canvas {
        float: left;
        height: 565px;
        width: 100%;
    }
    #content {
        min-width: 320px;
    }

JS

    var mylatlongs = [
                        {"rank":1,"name":"name 1","lat":"-25.901820984476252","lng":"135"},
                        {"rank":2,"name":"name 2","lat":"-25.901820984476252","lng":"135.05"},
                        {"rank":3,"name":"name 3","lat":"-25.901820984476252","lng":"135.025"}
                    ];
    var infowindow = null;
    jQuery(function() {
            var StartLatLng = new google.maps.LatLng(mylatlongs[0]['lat'], mylatlongs[0]['lng']);
            var mapOptions = {
                center: StartLatLng,
                streetViewControl: false,
                panControl: false,
                maxZoom:17,
                zoom : 13,
                zoomControl:true,
                zoomControlOptions: {
                    style:google.maps.ZoomControlStyle.SMALL
                }
            };

        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        jQuery.each( mylatlongs, function(i, m) {
            var StartLatLng = new google.maps.LatLng(-25.901820984476252, 134.00135040279997);

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(m.lat, m.lng),
                bounds: true,
                id : 'mk_' + m.rank,
                letter : m.index,
                map: map,
                title: m.name
            });

            google.maps.event.addListener(marker, 'click', function() {
                if (infowindow) {
                    infowindow.close();
                }
                infowindow.open(map,marker);
                position: new google.maps.LatLng(m.lat, m.lng);
            });

            var contentString = '<div id="content">'+
              '<div id="siteNotice">'+
              '</div>'+
              '<h1 id="firstHeading" class="firstHeading">'+ m.name + '</h1>'+
              '<div id="bodyContent">'+ (m.rank) +
              '</div>'+
              '</div>';

            var infowindow = new google.maps.InfoWindow({
              content: contentString
            });

        });
    });

答案

每个标记都有一个信息窗口，每个标记有一个局部变量。当您尝试关闭previosuly打开的信息窗口时，您将关闭属于单击标记的那个窗口。

在循环外部创建一个信息窗口，并在click事件中设置它的内容，以便为显示它的标记更新它：

        var infowindow = new google.maps.InfoWindow({
            content: ''
        });

        jQuery.each( mylatlongs, function(i, m) {
            var StartLatLng = new google.maps.LatLng(-25.901820984476252, 134.00135040279997);

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(m.lat, m.lng),
                bounds: true,
                id : 'mk_' + m.rank,
                letter : m.index,
                map: map,
                title: m.name
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.close();
                infowindow.setContent(contentString);
                infowindow.open(map,marker);
            });

            var contentString = '<div id="content">'+
              '<div id="siteNotice">'+
              '</div>'+
              '<h1 id="firstHeading" class="firstHeading">'+ m.name + '</h1>'+
              '<div id="bodyContent">'+ (m.rank) +
              '</div>'+
              '</div>';

        });

但是：ぁzxswい

另一答案

http://jsfiddle.net/Guffa/GSX6G/3/

另一答案

定义全局对象

        google.maps.event.addListener(marker, 'click', function() {
            if(marker.open){
                infowindow.close();
                marker.open = false;
            }
            else{
                infowindow.open(map,marker);
                marker.open = true;
            }
            google.maps.event.addListener(map, 'click', function() {
                infowindow.close();
                marker.open = false;
            });
        });

更新了var infowindow;

另一答案

这是谷歌自己说的。通过在事件处理程序外部创建InfoWindow，我们确保一次只存在一个InfoWindow。如果我们在事件处理程序中放置了创建InfoWindow的代码，那么每次单击标记时我们都会创建一个新的InfoWindow。让我们与几个相同的InfoWindows相互叠加。

这意味着如果在事件处理程序中声明infoWindow，如：

this demo

然后，当您单击标记时，infoWindows将不断弹出

但是，如果他们的infoWindow是全局的，如：

 google.maps.event.addListener(marker, "click", function (e){
     var infoWindow = new google.maps.InfoWindow();
     infoWindow.setContent(props.content);
     infoWindow.open(map,marker);
 });

要么

 var infoWindow = new google.maps.InfoWindow();

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

     infoWindow.setContent(props.content);
     infoWindow.open(map,marker);
 });

那么你将只有一个InfoWindow弹出