Google maps api V3中的fitbounds（）不适合边界 [英] fitbounds() in Google maps api V3 does not fit bounds
问题描述
我使用Google API v3中的地理编码器显示国家/地区的地图。我得到了这个国家的推荐视口，但是当我想把这个视图贴到这个视口时，它不起作用（请参阅下面代码中调用fitBounds函数之前和之后的界限）。
我做错了什么？
如何将我的地图的视口设置为 results [0] .geometry。 viewport ？
var geocoder = new google.maps.Geocoder（）;
geocoder.geocode（
{'address'：'{{countrycode}}'}，
函数（结果，状态）{
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 地图。
您可能想要查看以下示例以获得更清晰的示范：
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title> Google地图fitBounds Demo< / title>
< script src =http://maps.google.com/maps/api/js?sensor=false
type =text / javascript>< / script>
< / head>
< body>
< div id =mapstyle =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，新的google.maps.LatLng（ne.lat（），sw.lng（）），
sw，新的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（）：
调整国家：US
国家/地区：RU
p>
国家：IT
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).
What am I doing wrong?
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))
}
);
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>
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():
Country: US
Country: RU
Country: IT
这篇关于Google maps api V3中的fitbounds（）不适合边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
