设置地图缩放以覆盖所有标记；确保以特定标记为中心

Posted 2023-02-23

【中文标题】设置地图缩放以覆盖所有标记；确保以特定标记为中心

【英文标题】：Set Zoom of Map to cover all markers; making sure center at a specific marker

【发布时间】：2016-04-26 01:13:58

【问题描述】：

我们可以通过此代码缩放地图并将其居中以显示所有标记：

var markers = //some array (all of them should be visible);
var Themarker = //a marker that should be the center
var bounds = new google.maps.LatLngBounds();
for(i=0;i<markers.length;i++) 
 bounds.extend(markers[i].getPosition());

map.fitBounds(bounds);

但是如何确定：

所有标记都是可见的（上面的代码就是这样做的） 地图的中心是Themarker（以上代码不这样做）

地图可以通过map.panTo(Themarker.getPosition()); 以Themarker 为中心，但在最后使用它会使标记滑出视图。

【问题讨论】：

是Themarker 是markers 数组的一部分吗？

不是我的情况，但如果你有解决方案，我可以使用

【参考方案1】：

您可以考虑以下解决方案来调整视口，以便在更改地图中心后使所有标记可见：

function initialize() 

    var center = new google.maps.LatLng(-31.953159, 115.849915); //Perth

    var options = 
        center,
        zoom: 20,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    ;
    var map = new google.maps.Map(document.getElementById("map-div"), options);


    var locations = [
            id: 1, name: "Brisbane", coords: [-33.867396, 151.206854],
             id: 2, name: "Sydney", coords: [-27.46758, 153.027892] ,
             id: 3, name: "Perth", coords: [-31.953159, 115.849915] ,
             id: 4, name: 'Canberra', coords: [-35.279014, 149.124449] 
    ];

    var markers = [];
    var bounds = new google.maps.LatLngBounds();
    locations.forEach(function (loc) 
        var pos = new google.maps.LatLng(loc.coords[0], loc.coords[1]);
        var marker = createMarker(map, pos);
        markers.push(marker);
        bounds.extend(pos);
    );
    map.fitBounds(bounds);
 
    map.panTo(center);  //change map center

    google.maps.event.addListenerOnce(map, 'idle', function () 
        resizeMapView(map, markers); //adjust viewport
    );


   




function resizeMapView(map, markers) 
    var mapBounds = map.getBounds(); // get bounds of the map object's viewport
   
    var result = markers.filter(function(marker)   //determine wether map contains all the markers
        if (!mapBounds.contains(marker.getPosition())) 
            return true;
        
    );
    if (result.length > 0) 
        var zoom = map.getZoom();
        map.setZoom(zoom - 1);
        resizeMapView(map, markers);
    



function createMarker(map,position) 
    return new google.maps.Marker(
        position: position,
        map: map
    );



google.maps.event.addDomListener(window, 'load', initialize);

html, body 
    height: 100%;
    margin: 0;
    padding: 0;


#map-div 
    height: 100%;

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map-div"></div>

JSFiddle