fitbounds()在谷歌地图api V3不适合边界
-
21-09-2019 - |
题
我使用的地理编码从谷歌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))
}
);
解决方案
这是因为需要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()
:
国家:US
国家:RU
国家:IT
其他提示
只是让你知道在什么方式,这可以定制,我已经准备了什么样的你可以做的如果你喜欢宽松一些的boundingBox在视
一样的只是
fitBounds
: http://jsbin.com/cakuhaca/1/edit一样的因为当你不在乎所有的视是可见的,并且总是放在一个更多的水平: http://jsbin.com/rofupidi/1/edit
一样当你只关心如果科学、技术和革新政策的边界框你失去超过X素水平或垂直 http://jsbin.com/rezapuye/1/edit
不隶属于 StackOverflow