Question

请你看一下This Demo，让我知道为什么我不能：

1-在新的信息框打开时关闭任何打开的信息框

2-当用户点击清除按钮时，清除/删除打开的信息框？

这是我的代码

$(document).ready(function() {
    var markers = []; // makers array
  var infoBox = null;
    var myOptions = { // map settings
        zoom: 15,
        center: new google.maps.LatLng(38.721759, -9.151692),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        sensor: 'true'
    }
    var map = new google.maps.Map(document.getElementById("canvas-map"), myOptions);

    var data = [ // map data
    {
        id: 1,
        content: '<div class="img"></div><div class="txt"><h1>THIS TITLE</h1><span>Sed posuere consectetur est at lobortis. Donec sed odio dui. Donec sed odio dui. Aenean eu leo quam.</span></div><div class="fot"></div>',
        position: {
            lat: 38.721759,
            lng: -9.151692
        }
    },
    {
        id: 2,
        content: '<div class="img"></div><div class="txt"><h1>THIS TITLE</h1><span>This is a test.</span></div><div class="fot"></div>',
        position: {
            lat: 38.720805,
            lng: -9.146585
        }
    }
    ]

    for (var i = 0; i < data.length; i++) {
        var current = data[i];

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(current.position.lat, current.position.lng),
            map: map,
            content: current.content
        });

        markers.push(marker);

        google.maps.event.addListener(markers[i], "click", function(e) {
              infoBox = new InfoBox({
                latlng: this.getPosition(),
                map: map,
                content: this.content
            });
        });
    }


   function clearMap(){
    for(i=0; i<markers.length; i++){
            markers[i].setMap(null);
        }
            markers = [];   
         infoBox.close();
    }

   $("#clear").on("click",function(){
       clearMap();
    });   
});

如你所见，我已经尝试了

 infoBox.close();

我为Uncaught TypeError: undefined is not a function获得了.close()我还尝试了.remove()从地图中移除信息框但放大或缩小时，地图上再次出现！

关闭现有的信息框，我也尝试了

 if (infoBox) {
            infoBox.close();
      }

在下面的鳕鱼中，但它也没有完成这项工作！

google.maps.event.addListener(markers[i], "click", function(e) {
 if (infoBox) {
        infoBox.close();
  }
          infoBox = new InfoBox({
            latlng: this.getPosition(),
            map: map,
            content: this.content
        });
    });
}

谢谢，

Answer 1

您的infoBox没有.close（）方法，请改用.setMap（null）。
如果您只想拥有一个InfoBox，只需创建一个（第一次打开它，因为它需要一个latlng），然后将其移动到相应的标记。需要编写一个方法来移动＆＃34; InfoBox

点击听众＆＃34;移动＆＃34; InfoBox：

google.maps.event.addListener(markers[i], "click", function (e) {
    if (!infoBox) {
        infoBox = new InfoBox({
            latlng: this.getPosition(),
            map: map,
            content: this.content
        });
    } else {
        infoBox.setOptions({
            map: map,
            content: this.content
        });
        infoBox.setPosition(this.getPosition());
    }
});

/* move the InfoBox
 */
InfoBox.prototype.setPosition = function(latlng) {
    this.latlng_ = latlng;
};

working fiddle

清除/删除Google地图信息框的问题（自定义InfoWindow）

1 个答案: