jquery gmap3 - 計算多個動態生成的標記座標的中心點和縮放 - 谷歌地圖api 3

Question

我基本上試圖對一些如何爲我的#map_div div設置自動縮放和自動中心功能。但是因爲我的標記是動態生成的，所以我不知何故需要縮放和中心自動工作，基於我的寬度和高度#map_div

但是，正如你可以在我的gmap3腳本中看到的，我不得不確定縮放和手動居中，不酷。

我在下面找到了這個腳本片段，但不知道如何與我的.gmap3腳本進行整合。有沒有可能與我的.gmap3 jquery插件腳本以某種方式整合？

中心點計算無功...

// 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.length; i++) { 
    latlngbounds.extend(latlng[ i ]); 
} 
map.fitBounds(latlngbounds); 

Found the above script here

我下面.gmap3腳本...

jQuery(function($) {  

    $('#map_div').gmap3({ 
     action: 'init', 
     options: { 
      center: [50.799019, -1.132037], 
      zoom: 5, 
      scrollwheel: false 
     } 
    }, { 
     action: 'addMarkers', 
     markers: [{ 
      lat: 50.799019, 
      lng: -1.132037, 
      data: 'Test One'}, 
     { 
      lat: 50.365162, 
      lng: -4.712017, 
      data: 'Test Two'}, 
     { 
      lat: 54.518726, 
      lng: -5.881054, 
      data: 'Test Three'}, 
     { 
      lat: 52.780964, 
      lng: -1.211863, 
      data: 'Test Four'}, 
     { 
      lat: 51.433998, 
      lng: -2.549690, 
      data: 'Test Five' 
     }], 
     marker: { 
      options: { 
       draggable: false 
      } 
     } 
    }); 
}); 

我通常會做的jsfiddle但該網站已關閉。

任何幫助，這將是非常感謝。

Answer 1

您是否嘗試過自動適應功能？

http://gmap3.net/en/catalog/16-misc/autofit-58

此功能擴展的地圖範圍包含每個疊加添加 （標記，圓...）

$('#test').gmap3(
    { circle:{ 
     options: { 
     center: [37.772323, -122.214897], 
     radius : 2500000, 
     fillColor : "#008BB2", 
     strokeColor : "#005BB7" 
     } 
    } 
    }, 
    "autofit" 
); 

Answer 2

這是我怎麼做到的，你可以訪問標記在「標記」回調中的座標，然後使用它們將地圖居中並用fitBounds自動縮放：

$('#map_canvas').gmap3({ 
map: { 
    options: { 
    zoom: 9, 
    center: [view.lat, view.lng] 
    }, 
    marker : { 
     values : markersArray, 
     options : { 
     draggable : false 
     }, 
    callback:function(m) 
    { //m will be the array of markers 
     var bounds=new google.maps.LatLngBounds(); 
     for(var i=0;i<m.length;++i) 
     { 
     bounds.extend(m[i].getPosition()); 
     } 
     try{ 
      var map=$(this).gmap3('get'); 
       map.fitBounds(bounds); 
       map.setCenter(bounds.getCenter()) 
      }catch(e){} 
    } 
    } 
} 
});