我正在设计一个包含Google Maps API在Full Screen 中的小网络应用程序。webapp 旨在成功地用于移动设备（甚至是小型设备）。实际上我从我的Database使用中获取一些坐标AJAX并将它们放在地图中。
我locations使用 AJAX推送数组中的坐标，然后执行以下操作：
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: new google.maps.LatLng(37.262577, -115.8314989),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_LEFT
}
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
//locations[i][1] is lang
//locations[i][2] is lng
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
如何以响应方式转换此脚本？我想在屏幕上看到我的所有标记，移动屏幕 <= 768px（宽度），我找不到任何通用处理程序来巧妙地调整（放大/缩小）地图的大小以查看屏幕中的所有标记。
谢谢阅读！
最好的办法是制作一个LatLngBounds对象并使用您想要显示的每对坐标对其进行扩展。然后，只需在您的地图对象上调用fitBounds()，并将您的边界作为参数，如下所示：
var marker, i;
var bounds = new google.maps.LatLngBounds()
for (i = 0; i < locations.length; i++) {
var coords = new google.maps.LatLng(parseFloat(locations[i][1]), parseFloat(locations[i][2]))
marker = new google.maps.Marker({
//locations[i][1] is lang
//locations[i][2] is lng
position: coords,
map: map
});
bounds.extend(coords);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);如果您只想在需要时应用，那么您必须通过比较它们的四肢 :getNorthEast()和getSouthWest()坐标来比较您使用 map.getBounds() 创建的变量边界。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句