Javascript Google MAP API v3：居中和放大显示的标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2818984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google MAP API v3: Center & Zoom on displayed markers
提问by meo
I use the following code to set markers on my map:
我使用以下代码在我的地图上设置标记：
var latLngs = []
$.each(locations.markers, function(i, m){
var myLatLng = new google.maps.LatLng(m.latitude, m.longitude);
latLngs[i] = myLatLng
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: m.city,
zIndex: i
});
})
The markers show up on my map. Now I would like to center & zoom the map on these markers. How can I accomplish this? I have tried:
标记出现在我的地图上。现在我想在这些标记上居中和缩放地图。我怎样才能做到这一点？我试过了：
map.fitBounds(getBoundsForLatLngs(latLngs));
The console.log of latLngs gives out:
latLngs 的 console.log 给出：
[(46.793182, 7.146903) { b=46.793182, more...}, (46.8077779, 7.1709386) { b=46.8077779, more...}]
But it doesn't seem to work, and I get no error in the console. What am I doing wrong?
但它似乎不起作用，并且我在控制台中没有收到任何错误。我究竟做错了什么？
回答by vsync
I've also find this fix that zooms to fit all markers
我还发现此修复程序可以缩放以适合所有标记
LatLngList: an array of instances of latLng, for example:
LatLngList：latLng实例的数组，例如：
// "map" is an instance of GMap3
var LatLngList = [
new google.maps.LatLng (52.537,-2.061),
new google.maps.LatLng (52.564,-2.017)
],
latlngbounds = new google.maps.LatLngBounds();
LatLngList.forEach(function(latLng){
latlngbounds.extend(latLng);
});
// or with ES6:
// for( var latLng of LatLngList)
// latlngbounds.extend(latLng);
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
回答by Pawe? Rychlik
In case you prefer more functional style:
如果您更喜欢更实用的风格：
// map - instance of google Map v3
// markers - array of Markers
var bounds = markers.reduce(function(bounds, marker) {
return bounds.extend(marker.getPosition());
}, new google.maps.LatLngBounds());
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
回答by Somnath Muluk
Try this function....it works...
试试这个功能......它有效......
$(function() {
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var latlng_pos=[];
var j=0;
$(".property_item").each(function(){
latlng_pos[j]=new google.maps.LatLng($(this).find(".latitude").val(),$(this).find(".longitude").val());
j++;
var marker = new google.maps.Marker({
position: new google.maps.LatLng($(this).find(".latitude").val(),$(this).find(".longitude").val()),
// position: new google.maps.LatLng(-35.397, 150.640),
map: map
});
}
);
// map: an instance of google.maps.Map object
// latlng: an array of google.maps.LatLng objects
var latlngbounds = new google.maps.LatLngBounds( );
for ( var i = 0; i < latlng_pos.length; i++ ) {
latlngbounds.extend( latlng_pos[ i ] );
}
map.fitBounds( latlngbounds );
});
回答by Somnath Muluk
for center and auto zoom on display markers
用于显示标记的中心和自动缩放
// map: an instance of google.maps.Map object
// latlng_points_array: an array of google.maps.LatLng objects
var latlngbounds = new google.maps.LatLngBounds( );
for ( var i = 0; i < latlng_points_array.length; i++ ) {
latlngbounds.extend( latlng_points_array[i] );
}
map.fitBounds( latlngbounds );
