当Infobox关闭时缩小，并且一次仅打开一个信息框

Question

• 问题一：关闭" Infobox"时，我该如何使其映射放大？

• 问题二：我将如何做一个" Infobox"一次开放？

我尝试添加：

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

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

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

我无法让您的代码工作，因此我创建了一个动作中上述功能的基本示例。单击标记打开信息窗口并放大地图。关闭信息窗口，将地图放大。

问题2

查看Geocodezip对您的问题的评论。他提供了以前问题的链接，可以帮助您弄清楚如何一次打开一个信息窗口。