Google Map API v3 — set bounds and center
我最近切换到Google Maps API V3。 我正在编写一个简单的例子来绘制数组中的标记,但是我不知道如何相对于标记自动居中和缩放。
我搜索了网络的高低,包括谷歌自己的文档,但没有找到一个明确的答案。 我知道我可以简单地采用坐标的平均值,但是如何相应地设置缩放?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 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] }); } } |
是的,只需声明您的新边界对象。
1 | var bounds = new google.maps.LatLngBounds(); |
然后为每个标记扩展您的边界对象:
1 2 | bounds.extend(myLatLng); map.fitBounds(bounds); |
API:google.maps.LatLngBounds
得到了一切 - 请参阅最后几行代码 - (
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 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); } |
我对google maps api v3的建议是(不要认为它可以更有效地完成):
1 2 3 4 5 6 7 8 | 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
答案非常适合调整标记的地图边界,但如果您想为多边形和圆形等形状展开Goog??le地图边界,则可以使用以下代码:
对于圈子
1 | bounds.union(circle.getBounds()); |
对于多边形
1 2 3 4 5 | polygon.getPaths().forEach(function(path, index) { var points = path.getArray(); for(var p in points) bounds.extend(points[p]); }); |
对于矩形
1 | bounds.union(overlay.getBounds()); |
对于折线
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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()方法仍适用于最新版本的Maps API for Flash,其中fitBounds()不存在。
使用下面一个,
map.setCenter(bounds.getCenter(),map.getBoundsZoomLevel(bounds));