谷歌地图 API V3 方法 fitBounds() 使用 Prototypejs

Question

我有一个如下的 div 来显示谷歌地图：

#map {
   width: 300px;
   height: 300px;
   border: 1px solid #DDD;
}

<div id="map"></div>

我想以适合上述视口边界的缩放级别显示地图。

当我如下编码时，它工作正常：

    var geocoder = new google.maps.Geocoder();
    var map = new google.maps.Map($('#map')[0], {zoom: 10});

    geocoder.geocode({ 'address': generatedAddress }, function (results, status) {
        if (status == 'OK') {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                if (results[0].geometry.viewport)
                    map.fitBounds(results[0].geometry.viewport);

      } else {
          alert('Geocode was not successful for the following reason: ' + status);
      }
   }); 

当我使用typeahead-addresspicker.js 生成地图时，它放大得太远了？

我已将范围缩小到以下代码。当您调用 AddressPicker.prototype.updateMap 函数时，AddressPicker.prototype.initMap 函数上的 boundsForLocation 选项应返回 this.map.fitBounds(response.geometry.viewport); 当我调试时，我可以看到它在 AddressPicker.prototype.updateBoundsForPlace 函数中按预期命中以下代码：

if (response.geometry.viewport) {
  console.log('test');
  return this.map.fitBounds(response.geometry.viewport);
}

我不明白它是如何连接回 google.maps.Map - 我不熟悉 ptototypejs？所以基本上运行它，我们通过调用 initMap 来初始化地图，然后我们调用 updateMap 函数。在 updateMap 函数中，我们调用了以下 sn-p 代码：

if (_this.map) {
            if ((_ref = _this.mapOptions) != null) {
              _ref.boundsForLocation(response);
            }
   }

假设通过调用updateBoundsForPlace 设置边界但google maps options 不公开任何名为boundsForLocation 的属性？

AddressPicker.prototype.initMap = function() {
    var markerOptions, _ref, _ref1;
    if ((_ref = this.options) != null ? (_ref1 = _ref.map) != null ? _ref1.gmap : void 0 : void 0) {
      this.map = this.options.map.gmap;
    } else {
      this.mapOptions = $.extend({
        zoom: 3,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        boundsForLocation: this.updateBoundsForPlace
      }, this.options.map);
      this.map = new google.maps.Map($(this.mapOptions.id)[0], this.mapOptions);
    }
    this.lastResult = null;
    markerOptions = $.extend({
      draggable: true,
      visible: false,
      position: this.map.getCenter(),
      map: this.map
    }, this.options.marker || {});
    this.marker = new google.maps.Marker(markerOptions);
    if (markerOptions.draggable) {
      return google.maps.event.addListener(this.marker, 'dragend', this.markerDragged);
    }
  };


  AddressPicker.prototype.updateMap = function(event, place) {
    if (this.options.placeDetails) {
      return this.placeService.getDetails(place, (function(_this) {
        return function(response) {
          var _ref;
          _this.lastResult = new AddressPickerResult(response);
          if (_this.marker) {
            _this.marker.setPosition(response.geometry.location);
            _this.marker.setVisible(true);
          }
          if (_this.map) {
            if ((_ref = _this.mapOptions) != null) {
              _ref.boundsForLocation(response);
            }
          }
          return $(_this).trigger('addresspicker:selected', _this.lastResult);
        };
      })(this));
    } else {
      return $(this).trigger('addresspicker:selected', place);
    }
  };

  AddressPicker.prototype.updateBoundsForPlace = function(response) {
    if (response.geometry.viewport) {
      return this.map.fitBounds(response.geometry.viewport);
    } else {
      this.map.setCenter(response.geometry.location);
      return this.map.setZoom(this.options.zoomForLocation);
    }
  };

Answer 1

通过注释掉以下几行来修复：

//if (response.geometry.viewport) {
//  return this.map.fitBounds(response.geometry.viewport);
//} else {
  this.map.setCenter(response.geometry.location);
  return this.map.setZoom(this.options.zoomForLocation);
//}