4

我基本上是在尝试如何为我的#map_divdiv 设置自动缩放和自动居中功能。但是因为我的标记是动态生成的，我不知何故需要缩放和中心自动工作，基于我的宽度和高度#map_div

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

我在下面找到了这个脚本片段，但看不到如何将它与我的.gmap3脚本集成。是否可以以某种方式将它与我的.gmap3jquery 插件脚本集成？


中心点计算变量...

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

在这里找到上面的脚本


我的.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，但该网站已关闭。

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

4

2 回答 2

0

您是否尝试过自动调整功能？

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"
);
于 2013-07-11T15:06:52.873 回答
0

我就是这样做的，您可以在“标记”的回调中访问标记的坐标，然后使用它们将地图居中并使用 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){}
     }
  }
 }
});
于 2015-05-17T06:34:41.277 回答