Google Maps v3 fitBounds 缩放不一致
Posted
技术标签:
【中文标题】Google Maps v3 fitBounds 缩放不一致【英文标题】:Google Maps v3 fitBounds inconsistent zoom 【发布时间】:2015-08-27 20:19:35 【问题描述】:有一个非常奇怪的问题。
A:我的地图的一种方法可以正常工作。用户设置起点和终点并创建地图,fitBounds.extend(bounds) 适当地设置缩放级别以包含地图上的起点/终点标记。
B:第二种方法是,如果用户设置了起点但没有设置终点,但基于其他用户兴趣,我会为他们获取检索和终点,并使用与方法 A 相同的功能将其绘制在地图上。但是,在 fitBounds.extend(bounds) 上,它将缩放级别设置为 4(***别)。然后我必须强制设置缩放。
用户在任何时候执行方法 A(在方法 B 之前或之后)都没有关系……当其方法 A 时,缩放级别是正确的。当它的方法 B 总是缩放级别 4 时。
...但都使用相同的功能。
这两种方法都准确地将标记放在地图上,并准确地绘制标记之间的路线。仅在方法 A 上,自动缩放是正确的,在方法 B 上,缩放始终设置为 4。
如果用户执行 A,它是正确的……然后 B 发生,它缩小了……再次执行 B,它保持缩小……再次执行 A,它又回到正确的缩放。
把我逼疯了!
我的地图对象是“setMap”,它是一个全局变量
function setMapBounds(start,end)
mapBounds = new google.maps.LatLngBounds();
mapBounds.extend(start.position);
mapBounds.extend(end.position) ;
setMap.fitBounds(mapBounds) ;
function addMarkers(newMarkers) // an array of map points.
var tempMarkers = [] ;
for (var x=0;x<newMarkers.length;x++)
var tempLatlon = new google.maps.LatLng(newMarkers[x].lat,newMarkers[x].lon) ;
var tempMarker = createMarker(tempLatlon,newMarkers[x].img,newMarkers[x].title) ;
tempMarkers.push(tempMarker) ;
return tempMarkers ;
function createMarker(latlon,img,title)
var marker = new google.maps.Marker(
map:setMap,
position:latlon,
icon: img,
title:title
) ;
return marker ;
// 这是方法 A - 它总是正确设置缩放
function setDropoff(dropoffLoc) //called from: index.js/setPickup(), tab-map.html
geoCoder.geocode('address': dropoffLoc, function(results, status)
if (status == google.maps.GeocoderStatus.OK)
if (results[0])
endLocation = dropoffLoc ;
endLat = results[0].geometry.location.lat() ;
endLon = results[0].geometry.location.lng() ;
// first clear any existing END Markers only.
while(markersArray.length)
markersArray.pop().setMap(null);
endPointSet = 1 ;
endLatlon = new google.maps.LatLng(endLat,endLon) ;
var endMarker = createMarker(endLatlon,'img/red-pin.png','Drop off') ;
markersArray.push(endMarker) ;
setMapBounds(userMarker,endMarker) ;
if (startPointSet == 1)
drawRoute("DRIVING",startLocation,endLocation) ;
else
error = "Address not found."
);
//这是方法B,它总是将缩小到4。它被拉出另一个测试用户是否手动设置和结束点的函数......如果是,则在用户设置之间添加wayPoints起点/终点。如果不是,则将地图设置为用户起点到单个兴趣终点
if (endPointSet == 1) // draw Pickup to START to wayPoints to END
var markers = [
lat:interests[0].shub_lat,lon:interests[0].shub_lon,img:interests[0].img,title:"Pickup",
lat:interests[1].ehub_lat,lon:interests[1].ehub_lon,img:interests[1].img,title:"Dropoff"
] ;
var points = [interests.shub_address,interests.ehub_address] ;
extraMarkers = addMarkers(markers) ;
drawRoute("BICYCLING",startLocation,endLocation,points) ;
else
var markers = [
lat:interests[0].shub_lat,lon:interests[0].shub_lon,img:interests[0].img,title:"Dropoff"
] ;
extraMarkers = addMarkers(markers) ;
setMapBounds(userMarker,extraMarkers[0]) ;
drawRoute("WALKING",startLocation,interests[0].shub_address) ;
这是从方法 B 中的 else 传递到 setMapBounds 的对象。起点由用户设置...但没有设置终点,我正在为它们选择一个。第一个对象是开始,第二个对象是结束。
Lh __gm: Object, gm_accessors_: Object, map: Qk, closure_uid_909815000: 563, gm_bindings_: Object…
Lf: Object
...
position: pf
D: -82.49799999999999
k: 27.873196
...
Lh __gm: Object, gm_accessors_: Object, map: Qk, closure_uid_909815000: 602, gm_bindings_: Object…
Lf: Object
...
position: pf
D: -82.47631678090198
k: 27.9374560148825
...
这里是从方法 A 传递到 setMapBounds 的对象,其中用户设置了相同的起点和终点。您可以看到方法 A 和 B 的起点相同。
Lh __gm: Object, gm_accessors_: Object, map: Qk, closure_uid_909815000: 563, gm_bindings_: Object…
Lf: Object
...
position: pf
D: -82.49799999999999
k: 27.873196
...
Lh __gm: Object, gm_accessors_: Object, map: Qk, closure_uid_909815000: 703, gm_bindings_: Object…
Lf: Object
...
position: pf
D: -82.45717760000002
k: 27.950575
...
【问题讨论】:
你能具体说明这个问题是关于什么的吗?需要修复或解释吗? 好吧,两者都有。我正在寻找修复和解释。我不明白为什么方法 B 在使用与进行正确缩放的方法 A 相同的功能时会进行不正确的缩放。 你试过用其他国家的坐标吗?您提到它进入缩放级别 4,正如您所描述的“***”。我在 [developers.google.com/maps/documentation/javascript/geocoding] Geocoding Service Docs 中读到存在区域偏差。也许这会延续到setBounds
。能否请您发布完整的脚本,以便我了解更多上下文?
如果将start
和end
从setMapBounds
登录到控制台,从方法B调用时它们的值是多少?
请提供一个Minimal, Complete, Tested and Readable example 来证明该问题。展示问题的代码 sn-p 或小提琴会有所帮助,但只是一个可以在您的问题中运行的 完整 示例可能会为您提供有用的答案..
【参考方案1】:
我正在做一个类似的应用程序,我正在使用的代码是:
var start;
var end;
function updateMap(name, obj) //obj is a form input i.e. <input type="text">
var marker = (name==='start')?start:end;
geocoder.geocode(address:obj.value, function(results, status)
//get coords/check if is valid place
if(status === google.maps.GeocoderStatus.OK)
//get info, store in new marker
marker.setPosition(results[0].geometry.location);
marker.setTitle(obj.value);
//if both markers present
if(start.getPosition() && end.getPosition())
map.fitBounds(new google.maps.LatLngBounds(start.getPosition(), end.getPosition()));
else
//otherwise, if one marker
map.setCenter(marker.getPosition());
map.setZoom(15);
marker.setMap(map);
else if(status === google.maps.GeocoderStatus.ZERO_RESULTS)
alert('There is an issue with address. Please refer to the "Help" link.');
else
setTimeout(function()
updateMap(marker, obj);
, 200);
);
它的作用是从文本输入中获取一个参数,对其进行地理编码,然后在地图上放置一个标记。该函数由表单元素上的onchange
事件触发。这可以很容易地适应您自己的使用。如果只有一个点,我只是选择了一个默认缩放值(通常非常接近街道,但您可以随意调整)。
至于你为什么不工作的问题,我可以用整个代码来制定一个更好的猜测。目前,我认为这与区域偏见有关,或者它只是一个错误。最好解决它。
【讨论】:
以上是关于Google Maps v3 fitBounds 缩放不一致的主要内容,如果未能解决你的问题,请参考以下文章
Google Maps v3 fitBounds() 对单个标记来说太近了
Google Maps API v3:我可以在 fitBounds 之后设置缩放吗?
Google Maps v3:强制执行最低要求。使用 fitBounds 时的缩放级别
在 Google Maps API v3.0 中多次调用 map.fitBounds()