我有一個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);
}
}
這是假設設置通過調用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);
}
};
有沒有什麼辦法可以使一個小提琴說明問題?我不是很瞭解你想問什麼。 –
在initMap中,將此地圖設置爲Google地圖: this.map = this.options.map.gmap; 或 this.map = new google.maps.Map($(this.mapOptions.id)[0],this.mapOptions); –
@Scott我明白,但是當你調用updateMap函數時,它需要設置boundsForLocation。但看看https://developers.google.com/maps/documentation/javascript/reference#MapOptions api MapOptions沒有一個名爲boundsForLocation的屬性,所以它是如何設置的? – adam78