2016-09-13 82 views
-1

我有一個div如下顯示了谷歌地圖:谷歌地圖API V3方法fitBounds()使用Prototypejs

#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功能我們調用下面的代碼片段:

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

這是假設設置通過調用updateBoundsForPlacegoogle 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); 
    } 
    }; 
+1

有沒有什麼辦法可以使一個小提琴說明問題?我不是很瞭解你想問什麼。 –

+0

在initMap中,將此地圖設置爲Google地圖: this.map = this.options.map.gmap; 或 this.map = new google.maps.Map($(this.mapOptions.id)[0],this.mapOptions); –

+0

@Scott我明白,但是當你調用updateMap函數時,它需要設置boundsForLocation。但看看https://developers.google.com/maps/documentation/javascript/reference#MapOptions api MapOptions沒有一個名爲boundsForLocation的屬性,所以它是如何設置的? – adam78

回答

0

管理人註釋掉以下行來解決:

//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); 
//}