Google Maps JavaScript API - 自动缩放级别？
Nic*_*icy 5 javascript zoom bounds google-maps-api-3
我正在使用多个地图标记.目前我map.fitBounds(bounds);在我的JavaScript中使用来调整地图的大小.bounds包含多个LatLng对象.
我究竟做错了什么？因为它缩小得太远了:-(
JavaScript源码
var geocoder, map;
$(document).ready(function(){
var coll_gmap = $(".gmap");
if ( coll_gmap.length != 0 )
{
//initiate map
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeControl: true,
navigationControl: true,
scaleControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var bounds = new google.maps.LatLngBounds();
//loop all addressen + insert into map
map = new google.maps.Map(coll_gmap[0], myOptions);
coll_gmap.each(function(index)
{
if (geocoder) {
geocoder.geocode( { 'address': $(this).attr("address")}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
bounds.extend(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
console.log("Geocode was not successful for the following reason: " + status);
}//end if status
}); //end if geocoder.geocode
} //end if geocoder
}) //end coll_gmap each
map.fitBounds(bounds);
}//end if coll_gmap length
/* console.log("Script created by NicoJuicy");*/
}); //end onload
HTML源代码
<div class="gmap" address="SomeAddress1" style="width:700px;height:350px"></div>
<div class="gmap" address="someAddress2"></div>
Dan*_*llo 12
该fitBounds()方法应该有效.但请注意,它总是在地图的大小上保留一些填充.请考虑以下示例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps fitBounds Padding</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 543px; height: 350px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
var points = [
new google.maps.LatLng(51.22, 4.40),
new google.maps.LatLng(50.94, 3.13)
];
// Extend bounds with each point
for (var i = 0; i < points.length; i++) {
bounds.extend(points[i]);
new google.maps.Marker({position: points[i], map: map});
}
// Apply fitBounds
map.fitBounds(bounds);
// Draw the bounds rectangle on the map
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var boundingBox = new google.maps.Polyline({
path: [
ne, new google.maps.LatLng(ne.lat(), sw.lng()),
sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
],
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
boundingBox.setMap(map);
</script>
</body>
</html>
以上示例的屏幕截图:
红色边界框表示LatLngBounds使用两个标记扩展时的对象.请注意,地图画布很543px宽,还要注意边界框左侧和右侧的填充边距.
现在,如果我们减少只是地图画布的宽度1px,使用542px的fitBounds()方法将弹出到较低的缩放级别:
我在这里使用右侧的"相关"链接,我认为您的问题的答案与上一个问题相同.:p
请注意,每次使用平移/缩放地图的函数时,脚本都会忽略新的类似输入,直到它再次为它做好准备.因此,您必须检测到这一点,并且只有在接受时才调用fitBounds().尝试更换你的
map.fitBounds(bounds);
同
var listener = google.maps.event.addListener(map, "idle", function() {
map.fitBounds(bounds);
google.maps.event.removeListener(listener); });
祝好运.
我已经找到了解决方案。
而不是做单一的
bounds.extend(myLatLng)
每次将 myLatLng 添加到边界时，请执行以下操作
bounds = map.getBounds();
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
希望这对任何人都有帮助！
| 归档时间： |
|
| 查看次数： |
14593 次 |
| 最近记录： |