信息框关闭时缩小，一次只打开一个信息框谷歌地图

Question

• 问题一：关闭“信息框”时如何让地图缩小？

• 问题二：我怎样才能做到一次只打开一个“信息框”？

我已经尝试添加：

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

但是代码似乎不起作用。有什么想法吗？

function InfoBox(opts) {
    google.maps.OverlayView.call(this);
    this.latlng_ = opts.latlng;
    this.map_ = opts.map;
    this.content = opts.content;
    this.offsetVertical_ = -195;
    this.offsetHorizontal_ = 5;
    this.height_ = 165;
    this.width_ = 266;
    var me = this;
    this.boundsChangedListener_ =
        google.maps.event.addListener(this.map_, "bounds_changed", function () {
            return me.panMap.apply(me);

        });

    this.setMap(this.map_);
}

InfoBox.prototype = new google.maps.OverlayView();

InfoBox.prototype.remove = function () {
    if (this.div_) {
        this.div_.parentNode.removeChild(this.div_);
        this.div_ = null;
    }
};


    this.createElement();
    if (!this.div_) return;

    var pixPosition = this.getProjection().fromLatLngToDivPixel(this.latlng_);
    if (!pixPosition) return;

    this.div_.style.width = this.width_ + "px";
    this.div_.style.left = (pixPosition.x + this.offsetHorizontal_) + "px";
    this.div_.style.height = this.height_ + "px";
    this.div_.style.top = (pixPosition.y + this.offsetVertical_) + "px";
    this.div_.style.display = 'block';
};

InfoBox.prototype.createElement = function () {
    var panes = this.getPanes();
    var div = this.div_;
    if (!div) {

        div = this.div_ = document.createElement("div");
            div.className = "infobox"
        var contentDiv = document.createElement("div");
            contentDiv.className = "content"
            contentDiv.innerHTML = this.content;
        var closeBox = document.createElement("div");
            closeBox.className = "close";
            closeBox.innerHTML = "x";
        div.appendChild(closeBox);

        function removeInfoBox(ib) {
            return function () {
                ib.setMap(null);
            };
        }
        google.maps.event.addDomListener(closeBox, 'click', removeInfoBox(this));
        div.appendChild(contentDiv);
        div.style.display = 'none';
        panes.floatPane.appendChild(div);
        this.panMap();
    } else if (div.parentNode != panes.floatPane) {

        div.parentNode.removeChild(div);
        panes.floatPane.appendChild(div);
    } else {

       .
    }
}

InfoBox.prototype.panMap = function () {

    var map = this.map_;
    var bounds = map.getBounds();
    if (!bounds) return;

    var position = this.latlng_;

    var iwWidth = this.width_;
    var iwHeight = this.height_;

    var iwOffsetX = this.offsetHorizontal_;
    var iwOffsetY = this.offsetVertical_;

    var padX = 40;
    var padY = 40;

    var mapDiv = map.getDiv();
    var mapWidth = mapDiv.offsetWidth;
    var mapHeight = mapDiv.offsetHeight;
    var boundsSpan = bounds.toSpan();
    var longSpan = boundsSpan.lng();
    var latSpan = boundsSpan.lat();
    var degPixelX = longSpan / mapWidth;
    var degPixelY = latSpan / mapHeight;

    var mapWestLng = bounds.getSouthWest().lng();
    var mapEastLng = bounds.getNorthEast().lng();
    var mapNorthLat = bounds.getNorthEast().lat();
    var mapSouthLat = bounds.getSouthWest().lat();

    var iwWestLng = position.lng() + (iwOffsetX - padX) * degPixelX;
    var iwEastLng = position.lng() + (iwOffsetX + iwWidth + padX) * degPixelX;
    var iwNorthLat = position.lat() - (iwOffsetY - padY) * degPixelY;
    var iwSouthLat = position.lat() - (iwOffsetY + iwHeight + padY) * degPixelY;

    var shiftLng =
        (iwWestLng < mapWestLng ? mapWestLng - iwWestLng : 0) +
        (iwEastLng > mapEastLng ? mapEastLng - iwEastLng : 0);
    var shiftLat =
        (iwNorthLat > mapNorthLat ? mapNorthLat - iwNorthLat : 0) +
        (iwSouthLat < mapSouthLat ? mapSouthLat - iwSouthLat : 0);

    var center = map.getCenter();

    var centerX = center.lng() - shiftLng;
    var centerY = center.lat() - shiftLat;

    map.setCenter(new google.maps.LatLng(centerY, centerX));

    google.maps.event.removeListener(this.boundsChangedListener_);
    this.boundsChangedListener_ = null;
};

function initialize() {
    var markers = []; 

    var myOptions = { 
        zoom: 3,
        center: new google.maps.LatLng(-5.646, 20.0611),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        sensor: 'true'
    }
    var map = new google.maps.Map(document.getElementById("canvas-map"), myOptions);

    var data = [ 
      {
        'id':1,
        'content':'Hello my name is marker, I\'m from Google',
        'position': {
          'lat':-33,
          'lng':150
         }
      },
      {
        'id':2,
        'content':'I am the content of this infobox. Wow, what a text.<br><br><a href="#">The good thing is: Tags are also possible</a>',
        'position': {
          'lat':-34,
          'lng':150
         }
      },
    ]

    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);
  marker.addListener('click', function() {
          map.setZoom(8);
          map.setCenter(marker.getPosition());

        });

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

      });

    }


}

Answer 1

回答问题 1

如果您希望地图在用户关闭信息窗口时缩小，您可以在信息窗口对象上监听closeclick 事件。

infoWindow.addListener('closeclick', function() {
  map.setZoom(3); // Set the desired zoom level
});

我无法让您的代码正常工作，因此我创建了上述功能的basic example。点击标记打开一个信息窗口并放大地图。关闭信息窗口，缩小地图。

回答问题 2

查看 geocodezip 的 cmets 以解决您的问题。他提供了links 到previous questions，可以帮助您弄清楚如何一次只打开一个信息窗口。