Google 地图 api V3 中的 fitbounds() 不适合边界
Posted
技术标签:
【中文标题】Google 地图 api V3 中的 fitbounds() 不适合边界【英文标题】：fitbounds() in Google maps api V3 does not fit bounds 【发布时间】：2011-01-30 11:41:03 【问题描述】：我正在使用来自 Google API v3 的地理编码器来显示一个国家/地区的地图。我得到了该国家/地区的推荐视口，但是当我想使地图适合该视口时，它不起作用（请参阅下面代码中调用 fitBounds 函数之前和之后的边界）。
我做错了什么？
如何将地图的视口设置为results[0].geometry.viewport？
var geocoder = new google.maps.Geocoder();
geocoder.geocode(
'address': 'countrycode',
function(results, status)
var bounds = new google.maps.LatLngBounds();
bounds = results[0].geometry.viewport;
console.log(bounds); // ((35.173, -12.524), (45.244, 5.098))
console.log(map.getBounds()); // ((34.628, -14.683), (58.283, 27.503))
map.fitBounds(bounds);
console.log(map.getBounds()); // ((25.740, -24.806), (52.442, 17.380))
);
【问题讨论】：
【参考方案1】：发生这种情况是因为fitBounds() 需要使用可能的最大缩放级别捕捉到适合地图画布的视口。另一方面，地理编码器返回的视口不依赖于地图画布的大小、布局或缩放级别。因此fitBounds() 方法会调整地图的视口，以便在地图中心完整查看传递的LatLngBounds。
您可能需要查看以下示例以获得更清晰的演示：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps fitBounds Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 350px"></div>
<script type="text/javascript">
var myOptions = mapTypeId: google.maps.MapTypeId.ROADMAP ;
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var geocoder = new google.maps.Geocoder();
geocoder.geocode('address': 'RU', function (results, status)
var ne = results[0].geometry.viewport.getNorthEast();
var sw = results[0].geometry.viewport.getSouthWest();
map.fitBounds(results[0].geometry.viewport);
var boundingBoxPoints = [
ne, new google.maps.LatLng(ne.lat(), sw.lng()),
sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
];
var boundingBox = new google.maps.Polyline(
path: boundingBoxPoints,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
);
boundingBox.setMap(map);
);
</script>
</body>
</html>
以下是上述示例中各个国家/地区的一些屏幕截图。红色边界框是地理编码器返回的视口。注意边界框和实际视口之间的差异，由fitBounds() 调整：
国家：美国
国家：俄罗斯
国家：IT
【讨论】：
我也很难理解如何做到这一点，很棒的详细解释！ 非常感谢您的详尽解释。 boundingBox 是一个很好的主意，可以清楚地说明这一点。 只是为了澄清，这是纵横比的问题。我花了很长时间才弄清楚。在上面的三个示例图像中，每个国家的边界框的纵横比不同，但整体地图边界框的纵横比保持不变。以此类推，并非所有尺码都穿相同尺码的裤子，但裤子有固定尺码，因此，有些人很难找到合适的尺码。并非所有国家/地区都能以特定的缩放比例完美融入 Google 边界框。【参考方案2】：只是为了让您知道这可以通过什么方式进行自定义，我准备了一个示例，如果您希望在视口中放松一些边界框，您可以做什么
只有fitBounds:http://jsbin.com/cakuhaca/1/edit的示例
当您不关心所有视口是否可见并始终放大一个级别时的示例：http://jsbin.com/rofupidi/1/edit
仅当您正在丢失的边界框的尖端在水平或垂直方向上超过 X 个像素时的示例http://jsbin.com/rezapuye/1/edit
【讨论】：
对不起。再次使用 jsbin 链接修复。 Thx 帮助我更加了解“自动缩放”不像我想要的那样工作 :-)以上是关于Google 地图 api V3 中的 fitbounds() 不适合边界的主要内容，如果未能解决你的问题，请参考以下文章
Google Maps API v3 将地图重新定位到标记
google maps js v3 api教程 -- 创建一个地图