Google Maps 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功能boundsForLocation期權AddressPicker.prototype.initMap函數返回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 函數中，我們調用以下代碼片段：

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

假設通過調用updateBoundsForPlace來設置邊界，但谷歌地圖選項沒有公開任何名為 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);
//}