jquery gmap 3 - 计算多个动态生成的标记坐标的中心点和缩放 - google maps api 3答案

【问题标题】：jquery gmap3 - calculate center point and zoom of multiple dynamically generated marker co-ordinates - google maps api 3jquery gmap 3 - 计算多个动态生成的标记坐标的中心点和缩放 - google maps api 3
【发布时间】：2012-11-15 04:53:11
【问题描述】：

我基本上是在尝试如何为我的#map_div div 设置自动缩放和自动居中功能。但是因为我的标记是动态生成的，所以我需要根据#map_div 的宽度和高度自动缩放和居中。

但正如您在我的 gmap3 脚本中看到的那样，我必须手动确定缩放和居中，这并不酷。

我在下面找到了这个脚本 sn-p，但看不到如何将它与我的 .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，但网站已关闭。

对此的任何帮助将非常感谢。

【问题讨论】：

嗨 Joshc，你找到让它与 gmap3 一起工作的方法了吗？你介意分享一下吗？ tnx！

标签： jquery google-maps-api-3 jquery-gmap3

【解决方案1】：

我就是这样做的，你可以在 "marker" 的回调中访问标记的坐标，然后使用它们来居中地图并使用 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){}
     }
  }
 }
});

【讨论】：

【解决方案2】：

您尝试过自动调整功能吗？

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

【讨论】：

它不调整缩放级别。来自文档：“此功能不是自动缩放”。