谷歌地图信息窗口关闭不起作用

Question

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

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

但是，当我单击第一个引脚，然后单击其他引脚（不单击 x）时，信息窗口只会不断弹出，而不会删除其他引脚。如何重构我的代码以使其正常工作？

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
            });

        });
    });

Answer 1

这是由谷歌自己声明的。 通过在事件处理程序之外创建 InfoWindow，我们确保一次只存在一个 InfoWindow。如果我们将用于创建 InfoWindow 的代码放在事件处理程序中，我们将在每次单击标记时创建一个新的 InfoWindow。给我们留下了几个相同的信息窗口。

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

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

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

但是，如果 infoWindow 是全局的，例如：

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

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

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

或

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

那么你只会弹出一个信息窗口

Answer 2

        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;
            });
        });

Answer 3

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

在循环之外创建一个信息窗口，并在点击事件中设置它的内容，以便它在你显示它的标记处得到更新：

        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>';

        });

演示：http://jsfiddle.net/Guffa/GSX6G/3/

Answer 4

定义全局对象

var infowindow;

更新this demo