如何在缩小时关闭信息框

时间:2013-04-09 07:13:33

标签: google-maps google-maps-api-3 google-maps-markers

我有一个带有一些标记和标记簇的地图,它工作正常。我添加了InfoBoxes并且它们可以工作,但问题是,当我缩小并且InfoBox打开时,标记将消失(并获得标记集)并且框将保持在那里,打开时没有下面的标记。

我可以使用简单的解决方案让所有信息框都关闭缩放变化,但我甚至无法做到这一点。我遇到的问题是,在我的听众中,由于某种原因我无法访问我的标记。这是我的代码:

var infoList = [];

function initialize() {
    var mapOptions = {
      ...
    };
    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);
    var imageUrl = 'pin.png';
    var markers = []; 
    var markerImage = new google.maps.MarkerImage(imageUrl, new google.maps.Size(51, 71));

    for (var i = 0; i < data.photos.length; i++) { 
        var dataPhoto = data.photos[i];
        var latLng = new google.maps.LatLng(dataPhoto.latitude, dataPhoto.longitude);
        var marker = new google.maps.Marker({
            position: latLng,
            icon: markerImage,
            title: dataPhoto.photo_title
        });
        boxText = document.createElement("div"),

        infoboxOptions = {
            alignBottom:true,
            content: boxText,
            disableAutoPan: false,
            maxWidth: 0,
            pixelOffset: new google.maps.Size(-60, -70),
            zIndex: null,
            boxStyle: { 
              width: "280px"
             },
            closeBoxMargin: "12px 4px 2px 2px",
            closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
            infoBoxClearance: new google.maps.Size(1, 1),
            isHidden: false,
            pane: "floatPane",
            enableEventPropagation: false
        };

        markers.push(marker);

        markers[i].infobox = new InfoBox(infoboxOptions);

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                markers[i].infobox.open(map, this);
                map.panTo(latLng);
            }
        })(marker, i));

    }

    var markerCluster = new MarkerClusterer(map, markers);

    google.maps.event.addListener(map, 'zoom_changed', function(markers){
        /*Here markers is undefined*/
        if (! markers.length) { return; }
        for (i in markers) {
           markers[i].infoBox.close();
        }

    });
}
    google.maps.event.addDomListener(window, 'load', initialize);

2 个答案:

答案 0 :(得分:2)

您正在创建一个新的&#34;标记&#34; zoom_changed侦听器内的变量。删除&#34;标记&#34;来自参数列表:

google.maps.event.addListener(map, 'zoom_changed', function(){
    if (! markers.length) { return; }
    for (i in markers) {
       markers[i].infobox.close();
    }
});

您的代码不一致,您创建的标记属性为:

markers[i].infobox = new InfoBox(infoboxOptions);

我改变了上述内容(在调试器中应该很明显)。

答案 1 :(得分:0)

正如您所提到的,如果您想在缩小或放大时关闭地图中的所有信息窗口,则可以使用此代码。它会帮助你。

google.maps.event.addListener(map, 'zoom_changed', function() {
infoWindow.close();
});