Google Map API v3 – 设置边界和中心

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

我search了networking的高低,包括谷歌自己的文档,但还没有find明确的答案。 我知道我可以简单地取坐标的平均值,但是如何设定相应的缩放比例呢?

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] }); } } 

是的,只需声明你的新边界对象。

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

然后为每个标记,扩展你的边界对象:

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

API: google.maps.LatLngBounds

得到的一切sorting – 请参阅最后几行代码 – ( 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); } 

我的谷歌地图api v3的build议是(不要认为它可以做得更有效):

 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

答案非常适合调整标记的地图边界,但是如果您想要扩展诸如多边形和圆形等形状的Google地图边界,则可以使用以下代码:

对于圈子

 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)); 

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

使用下面的一个,

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