Google Maps API V3 fitbounds（）缩小，但从不放入 [英] Google Maps API V3 fitbounds() zooms out but never in
问题描述
我创建了一个相当复杂的商店定位器。用户输入他们的邮编，一张表格返回地图上带有相应标记的结果。他们可以浏览结果，标记进一步移出， fitbounds（）函数非常适合缩小到合适的缩放级别以适应标记。问题是如果你回到较近的位置，
map.setCenter（bounds.getCenter （））;
map.panToBounds（bounds）;
map.fitBounds（bounds）;
谢谢！
问题是这样的：我们设置了
var bounds = new google.maps.LatLngBounds（）;
，以便我们稍后可以将我们的标记符合到地图上的有界区域。 GMaps将总是以相应的方式异步缩小到fitBounds（），但不会放大以达到相同效果（如前面提到的@broady）。这对于许多应用来说并不理想，因为一旦你在地图上显示了一系列标记并导致地图缩小（可能<10），在用户不手动的情况下它不会缩小。 p>
GMaps将继续使用（缩小字数）界限（缩小标记收集状态）（对不起）。在每次调用新标记之前设置为'null'会为您提供新的地图。
要自动放大，只需设置LatLngBounds（）。到'null'就像这样（见下面的伪例子来看它的位置）：
bounds = new google.maps.LatLngBounds（空值）;
伪示例：
// map stuff / initiation
...
var bounds = new google.maps.LatLngBounds（）;
var gmarkers = [];
函数CreateMarker（obj）{
myLatLng = new google.maps.LatLng（obj ['latitude']，obj ['longitude']）;
marker = new google.maps.Marker（{
position：myLatLng，
map：map
}）;
google.maps.event.addListener（marker，'click'，（function（marker，i））{
return function（）{
infowindow.setContent（obj ['job']） ;
infowindow.open（map，marker）;
}
}）（marker，i））;
bounds.extend（myLatLng）;
gmarkers.push（marker）;
}
....
//这里是我用来从数据库抓取标记坐标的AJAX方法：
$ .ajax（{
beforeSend：function（）{
clear_markers（gmarkers）; //参见下面的clear_markers（）函数声明
}，
cache：false，
data：params，
dataType：'json'，
timeout：0，
type：'POST'，
url：'/map/get_markers.php?_=&&t ;？php echo md5（session_id（）.time（）.mt_rand（1,9999））;？>'，
success：function（data）{
if（data）{
if（data ['count']> 0）{
var obj;
var results = data ['results'];
//绘制标记
$（b为结果）{
if（r <（data ['count']））{
CreateMarker（results [r]）;
}
}
}
}
}，
完成：function（）{
map.fitBounds（bounds）;
}
}）;
// clear_markers（）
函数clear_markers（a）{
if（a）{
for（i in a）{
a [i] .setMap（NULL）;
}
a.length = 0;
}
bounds = new google.maps.LatLngBounds（null）; //这是魔法发生的地方;将LatLngBounds设置为null将重置当前边界，并允许直接针对要绘制在地图上的最新标记进行放大/缩小的新调用。
I've created a quite complex store locator of sorts. The user enters their zip and a table returns results with corresponding markers on a map. They can page through results and the markers move further and further out and the fitbounds() function works great for zoom out to the appropriate zoom level to fit the markers. The problem is that if you page back to closer locations the fitbounds() doesn't zoom in. Even if you enter a new search it doesn't zoom in around those new markers -- it centers over them but stays at whatever zoom level it was at previously. I hope this makes sense. If anyone knows what I need to add to get it to zoom back in on closer results please help. These are the google functions that I'm call at the end of my marker pushing function:
map.setCenter(bounds.getCenter());
map.panToBounds(bounds);
map.fitBounds(bounds);
Thanks!
The problem is this: we set
var bounds = new google.maps.LatLngBounds();
so that we can later fit our markers to a bounded area on the map. GMaps will always zoom out asynchronously to fitBounds() accordingly, but will not zoom in to achieve the same (as previously noted by @broady). This is not ideal for many applications as once you have gone and displayed a series of markers on the map that caused the map to zoom out (maybe <10), it will not zoom back in without the user manually doing so.
GMaps will continue to use the bounds of the (lack of better words) most zoomed out marker collection status (sorry). Setting to 'null' before each call for new markers gives you a fresh map to work with.
To auto-zoom in, simply set the LatLngBounds(); to 'null' like so (see pseudo example below to see its placement):
bounds = new google.maps.LatLngBounds(null);
Pseudo example:
// map stuff/initiation
...
var bounds = new google.maps.LatLngBounds();
var gmarkers = [];
function CreateMarker (obj) {
myLatLng = new google.maps.LatLng(obj['latitude'], obj['longitude']);
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(obj['job']);
infowindow.open(map, marker);
}
})(marker, i));
bounds.extend(myLatLng);
gmarkers.push(marker);
}
....
// here's an AJAX method I use to grab marker coords from a database:
$.ajax({
beforeSend: function() {
clear_markers(gmarkers); // see below for clear_markers() function declaration
},
cache: false,
data: params,
dataType: 'json',
timeout: 0,
type: 'POST',
url: '/map/get_markers.php?_=<?php echo md5(session_id() . time() . mt_rand(1,9999)); ?>',
success: function(data) {
if (data) {
if (data['count'] > 0) {
var obj;
var results = data['results'];
// Plot the markers
for (r in results) {
if (r < (data['count'])) {
CreateMarker(results[r]);
}
}
}
}
},
complete: function() {
map.fitBounds(bounds);
}
});
// clear_markers()
function clear_markers(a) {
if (a) {
for (i in a) {
a[i].setMap(null);
}
a.length = 0;
}
bounds = new google.maps.LatLngBounds(null); // this is where the magic happens; setting LatLngBounds to null resets the current bounds and allows the new call for zoom in/out to be made directly against the latest markers to be plotted on the map
}
这篇关于Google Maps API V3 fitbounds（）缩小，但从不放入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
