Google MAP API v3：显示标记的中心和缩放

Posted 2023-02-23

【中文标题】Google MAP API v3：显示标记的中心和缩放

【英文标题】：Google MAP API v3: Center & Zoom on displayed markers

【发布时间】：2011-02-18 15:00:26

【问题描述】：

我使用以下代码在我的地图上设置标记：

  var latLngs = []
  $.each(locations.markers, function(i, m)
   var myLatLng = new google.maps.LatLng(m.latitude, m.longitude);
   latLngs[i] = myLatLng                                          
   var marker = new google.maps.Marker(
    position: myLatLng,
    map: map,
    shadow: shadow,
    icon: image,
    shape: shape,
    title: m.city,
    zIndex: i
   );
  ) 

标记出现在我的地图上。现在我想在这些标记上居中和缩放地图。我怎样才能做到这一点？ 我试过了：

map.fitBounds(getBoundsForLatLngs(latLngs));

latLngs的console.log给出：

 [(46.793182, 7.146903)  b=46.793182,  more..., (46.8077779, 7.1709386)  b=46.8077779,  more...]

但它似乎不起作用，我在控制台中没有错误。我做错了什么？

【参考方案1】：

我也发现了zooms to fit all markers的这个修复

LatLngList：latLng的实例数组，例如：

// "map" is an instance of GMap3

var LatLngList = [
                     new google.maps.LatLng (52.537,-2.061), 
                     new google.maps.LatLng (52.564,-2.017)
                 ],
    latlngbounds = new google.maps.LatLngBounds();

LatLngList.forEach(function(latLng)
   latlngbounds.extend(latLng);
);

// or with ES6:
// for( var latLng of LatLngList)
//    latlngbounds.extend(latLng);

map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds); 

【讨论】：

这会将地图集中在一个点上，我想将地图集中在所有显示的点上

试试这个！ blog.shamess.info/2009/09/29/…

它起作用了，我不得不像你的例子一样使用 LatLngBounds。我将数组直接传递给fitBounds()。感谢您的快速支持

latlng是一个什么样的数组？它是如何获得each 功能的？ jQuery？

@Protectorone - 我在几年前回答过这个问题，但我不记得了，但我试图弄清楚并用额外的数据更新了答案。

【参考方案2】：

如果您更喜欢功能性风格：

// map - instance of google Map v3
// markers - array of Markers
var bounds = markers.reduce(function(bounds, marker) 
    return bounds.extend(marker.getPosition());
, new google.maps.LatLngBounds());

map.setCenter(bounds.getCenter());
map.fitBounds(bounds);

【参考方案3】：

试试这个功能......它的工作原理......

$(function() 
        var myOptions = 
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        ;
        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
        var latlng_pos=[];
        var j=0;
         $(".property_item").each(function()
            latlng_pos[j]=new google.maps.LatLng($(this).find(".latitude").val(),$(this).find(".longitude").val());
            j++;
            var marker = new google.maps.Marker(
                position: new google.maps.LatLng($(this).find(".latitude").val(),$(this).find(".longitude").val()),
                // position: new google.maps.LatLng(-35.397, 150.640),
                map: map
            );
        
        );
        // 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_pos.length; i++ ) 
            latlngbounds.extend( latlng_pos[ i ] );
        
        map.fitBounds( latlngbounds );



    );

【参考方案4】：

用于显示标记的中心和自动缩放

// map: an instance of google.maps.Map object

// latlng_points_array: an array of google.maps.LatLng objects

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

    for ( var i = 0; i < latlng_points_array.length; i++ ) 
        latlngbounds.extend( latlng_points_array[i] );
    

map.fitBounds( latlngbounds );