Javascript Google 地图 api V3 中的 fitbounds() 不适合边界
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2494756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
fitbounds() in Google maps api V3 does not fit bounds
提问by jul
I'm using the geocoder from Google API v3 to display a map of a country. I get the recommended viewport for the country but when I want to fit the map to this viewport, it does not work (see the bounds before and after calling the fitBounds function in the code below).
我正在使用 Google API v3 中的地理编码器来显示一个国家/地区的地图。我获得了该国家/地区的推荐视口，但是当我想将地图适合该视口时，它不起作用（请参阅下面代码中调用 fitBounds 函数之前和之后的边界）。
What am I doing wrong?
我究竟做错了什么？
How can I set the viewport of my map to results[0].geometry.viewport?
如何将地图的视口设置为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))
}
);
回答by Daniel Vassallo
This happens because the fitBounds()needs to snap to a viewport that fits the map canvas using the maximum zoom level possible. On the other hand, the viewport returned by the geocoder is not dependent on the size, layout or zoom level of the map canvas. Therefore the fitBounds()method adjusts the map's viewport in order to view the passed LatLngBoundsin full at the centre of the map.
发生这种情况是因为fitBounds()需要使用可能的最大缩放级别捕捉到适合地图画布的视口。另一方面，地理编码器返回的视口不依赖于地图画布的大小、布局或缩放级别。因此，该fitBounds()方法会调整地图的视口，以便在地图的LatLngBounds中心完整地查看传递的内容。
You may want to check the following example for a clearer demonstation:
您可能需要查看以下示例以获得更清晰的演示：
<!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>
Below are some screenshots for various countries from the above example. The red bounding box is the viewport returned by the geocoder. Note the difference between the bounding box and the actual viewport, as adjusted by fitBounds():
以下是上述示例中各个国家/地区的一些屏幕截图。红色边界框是地理编码器返回的视口。请注意边界框和实际视口之间的差异，由 调整fitBounds()：
Country: US
国家：美国
Country: RU
国家：俄罗斯
Country: IT
国家：IT
回答by kaskader
Just to let you know in what way this can be customized, I have prepared a sample of what you can do if you prefer to loose some of the boundingBox in the viewport
只是为了让您知道可以自定义的方式，我准备了一个示例，说明如果您希望在视口中松开一些边界框，您可以做什么
a sample with just
fitBounds: http://jsbin.com/cakuhaca/1/edita sample for when you don't care that all the viewport is visible and always zoom in one more level: http://jsbin.com/rofupidi/1/edit
a sample when you care only if the stip of the bounding box that you are loosing is more than X pixels in horizontally or vertically http://jsbin.com/rezapuye/1/edit
一个示例
fitBounds：http: //jsbin.com/cakuhaca/1/edit当您不关心所有视口是否可见并始终放大一级时的示例：http: //jsbin.com/rofupidi/1/edit
仅当您丢失的边界框的尖端在水平或垂直方向上超过 X 像素时的示例http://jsbin.com/rezapuye/1/edit
