Google 地图 api V3 中的 fitbounds() 不适合边界 [英] fitbounds() in Google maps api V3 does not fit bounds
问题描述
我正在使用 Google API v3 中的地理编码器来显示一个国家/地区的地图.我获得了该国家/地区的推荐视口，但是当我想将地图适合该视口时，它不起作用(请参阅下面代码中调用 fitBounds 函数之前和之后的边界).
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).
我做错了什么?
如何将地图的视口设置为 results[0].geometry.viewport?
How can I set the viewport of my map to 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))
}
);
推荐答案
发生这种情况是因为 fitBounds() 需要使用可能的最大缩放级别捕捉到适合地图画布的视口.另一方面，地理编码器返回的视口不依赖于地图画布的大小、布局或缩放级别.因此，fitBounds() 方法会调整地图的视口，以便在地图的中心完整地查看传递的 LatLngBounds.
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 LatLngBounds in full at the centre of the map.
您可能需要查看以下示例以获得更清晰的演示:
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>
以下是上述示例中各个国家/地区的一些屏幕截图.红色边界框是地理编码器返回的视口.请注意边界框和实际视口之间的差异，由 fitBounds() 调整:
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():
国家:美国
国家:俄罗斯
国家:IT
这篇关于Google 地图 api V3 中的 fitbounds() 不适合边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
