映射API v3 -设置边界和中心

我最近切换到谷歌Maps API V3。我正在处理一个简单的例子，从数组中绘制标记，但是我不知道如何对标记自动居中和缩放。

我已经搜索了净高和低，包括谷歌自己的文档，但没有找到一个明确的答案。我知道我可以简单地取坐标的平均值，但我如何相应地设置缩放?

function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),




mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);


setMarkers(map, beaches);
}




var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.423036, 151.259052, 5],
['Cronulla Beach', -34.028249, 121.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.450198, 151.259302, 1]
];


function setMarkers(map, locations) {


var image = new google.maps.MarkerImage('images/beachflag.png',
new google.maps.Size(20, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',


new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));




var lat = map.getCenter().lat();
var lng = map.getCenter().lng();




var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
399645 次浏览
小开
最佳答案

所有东西都排序了-请参阅最后几行代码- (bounds.extend(myLatLng); map.fitBounds(bounds);)

function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
setMarkers(map, beaches);
}


var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 161.259052, 5],
['Cronulla Beach', -36.028249, 153.157507, 3],
['Manly Beach', -31.80010128657071, 151.38747820854187, 2],
['Maroubra Beach', -33.950198, 151.159302, 1]
];


function setMarkers(map, locations) {
var image = new google.maps.MarkerImage('images/beachflag.png',
new google.maps.Size(20, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
bounds.extend(myLatLng);
}
map.fitBounds(bounds);
}
小开

是的，您可以声明新的边界对象。

 var bounds = new google.maps.LatLngBounds();

然后对于每个标记，扩展bounds对象:

bounds.extend(myLatLng);
map.fitBounds(bounds);

API: google.maps.LatLngBounds

小开

使用以下一种，

map.setCenter (bounds.getCenter (), map.getBoundsZoomLevel(范围);

小开

setCenter()方法仍然适用于最新版本的Maps API for Flash，其中fitBounds()不存在。

小开

我对谷歌maps api v3的建议是(不认为它可以更有效地完成):

gmap : {
fitBounds: function(bounds, mapId)
{
//incoming: bounds - bounds object/array; mapid - map id if it was initialized in global variable before "var maps = [];"
if (bounds==null) return false;
maps[mapId].fitBounds(bounds);
}
}

结果u将适合你的地图窗口内的所有点。

例子工作完美，你可以自由检查它在这里www.zemelapis.lt

小开

答案是完美的调整地图边界的标记，但如果你想扩大谷歌地图边界的形状，如多边形和圆形，你可以使用以下代码:

为圆

bounds.union(circle.getBounds());

对多边形

polygon.getPaths().forEach(function(path, index)
{
var points = path.getArray();
for(var p in points) bounds.extend(points[p]);
});

为矩形

bounds.union(overlay.getBounds());

对折线

var path = polyline.getPath();


var slat, blat = path.getAt(0).lat();
var slng, blng = path.getAt(0).lng();


for(var i = 1; i < path.getLength(); i++)
{
var e = path.getAt(i);
slat = ((slat < e.lat()) ? slat : e.lat());
blat = ((blat > e.lat()) ? blat : e.lat());
slng = ((slng < e.lng()) ? slng : e.lng());
blng = ((blng > e.lng()) ? blng : e.lng());
}


bounds.extend(new google.maps.LatLng(slat, slng));
bounds.extend(new google.maps.LatLng(blat, blng));

提交答案