正文

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

 2023-02-23  251

关键词：

【中文标题】设置地图缩放以覆盖所有标记；确保以特定标记为中心【英文标题】：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

【讨论】：

如何居中/设置地图缩放以覆盖 Xamarin.Forms 上可见的所有标记？

】如何居中/设置地图缩放以覆盖Xamarin.Forms上可见的所有标记？【英文标题】：HowtoCenter/SetZoomofMaptocoverallmarkersvisibleonXamarin.Forms?【发布时间】：2015-09-2317:28:04【问题描述】：我正在为我的地图设置多个标记我可以静态设置缩放级... 查看详情

如何设置谷歌地图缩放级别以显示所有标记？

】如何设置谷歌地图缩放级别以显示所有标记？【英文标题】：HowtosettheGoogleMapzoomleveltoshowallthemarkers?【发布时间】：2011-01-2216:05:27【问题描述】：如何设置缩放级别以在Google地图上显示所有标记？在我的Google地图中，不同位置... 查看详情

如何设置谷歌地图缩放级别以显示所有标记？

特定标记上的中心地图和其他标记上的 fitToBounds

】特定标记上的中心地图和其他标记上的fitToBounds【英文标题】：CentermaponspecificmarkerandfitToBoundsonothermarkers【发布时间】：2013-12-1904:05:27【问题描述】：我有一张带有几个标记的地图，其中一个是“主要”，应该位于地图的中心... 查看详情

缩放以适合 LeafletJS 地图上的所有标记

】缩放以适合LeafletJS地图上的所有标记【英文标题】：ZoomtoFitAllMarkersonLeafletJSMap【发布时间】：2016-11-0411:07:11【问题描述】：在LeafletJS地图中添加一系列标记后，是否可以让Leaflet缩放并重新调整焦点以显示每个标记？我看到manys... 查看详情

Google Mark Cluster：以特定缩放级别显示集群中的所有标记

...这是我tried.mcOptions=minZoom:4,maxZoom:9,当标记/簇太靠近时，设置maxZoom可以正常工查看详情

自动调整缩放以适应谷歌地图中的所有标记

】自动调整缩放以适应谷歌地图中的所有标记【英文标题】：Automaticallyadjustzoomtoaccommodateallmarkerinagooglemap【发布时间】：2011-04-2307:15:02【问题描述】：使用最新版本的Google地图。如何使用经纬度添加标记并使用JavaScript自动调整... 查看详情

Android 地图 v2 缩放以显示所有标记

】Android地图v2缩放以显示所有标记【英文标题】：Androidmapv2zoomtoshowallthemarkers【发布时间】：2013-01-2712:05:15【问题描述】：GoogleMap中有10个标记。我想尽可能放大并保留所有标记？在早期版本中，这可以通过zoomToSpan()实现，但在v2... 查看详情

缩放以适合 Mapbox 或 Leaflet 中的所有标记

...orLeaflet【发布时间】：2013-05-2614:03:59【问题描述】：如何设置视图以在Mapbox或Leaflet中查看地图上的所有标记？就像GoogleMapsAPI对bounds所做的那样？例如：varlatlngbounds=newgoogle.maps.LatLngBounds();for(vari 查看详情

带有多个标记的谷歌地图自动中心

】带有多个标记的谷歌地图自动中心【英文标题】：Googlemapautocenterwithmultiplemarkers【发布时间】：2018-05-1312:39:35【问题描述】：我创建了一个地图以将我的搜索结果显示为地图上的标记，它几乎可以完美运行，但是自动居中/缩放... 查看详情

动态放大以适应所有标记 React-leaflet

...接近，有时它们会相距很远。有没有办法根据标记的距离设置缩放级别，以便用户可以一次看查看详情

Android 谷歌地图缩放以适合标记和当前位置

】Android谷歌地图缩放以适合标记和当前位置【英文标题】：Androidgooglemapszoomtofitmarkandcurrentposition【发布时间】：2013-04-0505:30:45【问题描述】：我正在尝试使用Google地图为我的应用创建自定义“我的位置”按钮。我要做的是... 查看详情

谷歌地图 - 缩放时保持中心

】谷歌地图-缩放时保持中心【英文标题】：Googlemaps-keepcenterwhenzooming【发布时间】：2015-01-2113:53:59【问题描述】：在Google地图中，当我放大或缩小时，我希望能够将地图的中心保持在我所在位置的标记上。这是Ingress所做的事情... 查看详情

谷歌地图 - 缩放时保持中心

单击反应传单 v.3.x 中的标记时如何动态更改地图缩放？

】单击反应传单v.3.x中的标记时如何动态更改地图缩放？【英文标题】：Howtochangemapzoomdynamicallywhenclickingonamarkerinreactleafletv.3.x?【发布时间】：2021-04-1604:33:25【问题描述】：我试图找到很多关于这个的东西，但我无法让它工作。我... 查看详情

如何根据标记数动态缩放谷歌地图？

...时间】：2019-08-2122:47:05【问题描述】：我最初为谷歌地图设置了缩放级别，我想根据边界中存在的标记数量动态更改缩放级别。如果初始地图缩放中没有标记，我无法通过更改地图边界来动态更改缩放。如果边界中没有标记，我... 查看详情

自动缩放和自动居中显示窗口中的所有标记

...显示位置。我正在传递一个位置数组来初始化（）。我想设置自动缩放和自动中心来映射，以便所有标记都可见。地图应采用缩放值，以便可以一次看到所有标记。.这是我的代码：functioninitialize(arr 查看详情

如何设置缩放以适应谷歌地图中的圆圈

】如何设置缩放以适应谷歌地图中的圆圈【英文标题】：HowtosetzoomtofitcircleinGoogleMaps【发布时间】：2012-04-0320:04:07【问题描述】：我们有距离搜索过滤器。它有一个允许设置基本标记的地图视口和一个允许以公里为单位输入距离... 查看详情

正文

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

如何居中/设置地图缩放以覆盖 Xamarin.Forms 上可见的所有标记？

如何设置谷歌地图缩放级别以显示所有标记？

如何设置谷歌地图缩放级别以显示所有标记？

特定标记上的中心地图和其他标记上的 fitToBounds

缩放以适合 LeafletJS 地图上的所有标记

Google Mark Cluster：以特定缩放级别显示集群中的所有标记

自动调整缩放以适应谷歌地图中的所有标记

Android 地图 v2 缩放以显示所有标记

缩放以适合 Mapbox 或 Leaflet 中的所有标记

带有多个标记的谷歌地图自动中心

动态放大以适应所有标记 React-leaflet

Android 谷歌地图缩放以适​​合标记和当前位置

谷歌地图 - 缩放时保持中心

谷歌地图 - 缩放时保持中心

单击反应传单 v.3.x 中的标记时如何动态更改地图缩放？

如何根据标记数动态缩放谷歌地图？

自动缩放和自动居中显示窗口中的所有标记

如何设置缩放以适应谷歌地图中的圆圈

Android 谷歌地图缩放以适合标记和当前位置