中心/设置地图缩放以覆盖所有可见的标记？

本文翻译自：Center/Set Zoom of Map to cover all visible Markers?

I am setting multiple markers on my map and I can set statically the zoom levels and the center but what I want is, to cover all the markers and zoom as much as possible having all markets visible 我在地图上设置了多个标记，我可以静态设置缩放级别和中心，但我想要的是，覆盖所有标记并尽可能缩放所有市场可见

Available methods are following 可用的方法如下

setZoom(zoom:number)

and 和

setCenter(latlng:LatLng)

Neither setCenter supports multiple location or Location array input nor setZoom does have this type of functionality setCenter既不支持多个位置或位置数组输入，也不支持setZoom具有此类功能

#1楼

参考：https://stackoom.com/question/1J006/中心-设置地图缩放以覆盖所有可见的标记

#2楼

You need to use the fitBounds() method. 您需要使用fitBounds()方法。

var markers = [];//some array
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {bounds.extend(markers[i].getPosition());
}map.fitBounds(bounds);

Documentation from developers.google.com/maps/documentation/javascript : 来自developers.google.com/maps/documentation/javascript的文档：

fitBounds(bounds[, padding])

Parameters: 参数：
 `bounds`: [`LatLngBounds`][1]|[`LatLngBoundsLiteral`][1] `padding` (optional): number|[`Padding`][1] 
Return Value: None 返回值：无

Sets the viewport to contain the given bounds. 将视口设置为包含给定边界。
Note : When the map is set to display: none , the fitBounds function reads the map's size as 0x0 , and therefore does not do anything. 注意：当map设置为display: none ， fitBounds函数将地图的大小读为0x0 ，因此不执行任何操作。 To change the viewport while the map is hidden, set the map to visibility: hidden , thereby ensuring the map div has an actual size. 要在隐藏地图时更改视口，请将地图设置为visibility: hidden ，从而确保地图div具有实际大小。

#3楼

To extend the given answer with few useful tricks: 用一些有用的技巧来扩展给定的答案：

var markers = //some array;
var bounds = new google.maps.LatLngBounds();
for(i=0;i<markers.length;i++) {bounds.extend(markers[i].getPosition());
}//center the map to a specific spot (city)
map.setCenter(center); //center the map to the geometric center of all markers
map.setCenter(bounds.getCenter());map.fitBounds(bounds);//remove one zoom level to ensure no marker is on the edge.
map.setZoom(map.getZoom()-1); // set a minimum zoom
// if you got only 1 marker or all markers are on the same address map will be zoomed too much.
if(map.getZoom()> 15){map.setZoom(15);
}//Alternatively this code can be used to set the zoom for just 1 marker and to skip redrawing.
//Note that this will not cover the case if you have 2 markers on the same address.
if(count(markers) == 1){map.setMaxZoom(15);map.fitBounds(bounds);map.setMaxZoom(Null)
}

UPDATE: 更新：
Further research in the topic show that fitBounds() is a asynchronic and it is best to make Zoom manipulation with a listener defined before calling Fit Bounds. 该主题的进一步研究表明，fitBounds（）是异步的，最好在调用Fit Bounds之前定义一个侦听器进行Zoom操作。
Thanks @Tim, @xr280xr, more examples on the topic : SO:setzoom-after-fitbounds 感谢@Tim，@ xr280xr，关于这个主题的更多例子： SO：setzoom-after-fitbounds

google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {this.setZoom(map.getZoom()-1);if (this.getZoom() > 15) {this.setZoom(15);}
});
map.fitBounds(bounds);

#4楼

There is this MarkerClusterer client side utility available for google Map as specified here on Google Map developer Articles , here is brief on what's it's usage: 这个MarkerClusterer客户端实用程序可用于谷歌地图，如Google Map开发人员文章中所述 ，这里简要介绍它的用法：

There are many approaches for doing what you asked for: 有很多方法可以满足您的要求：

Grid based clustering 基于网格的聚类
Distance based clustering 基于距离的聚类
Viewport Marker Management 视口标记管理
Fusion Tables 融合表
Marker Clusterer Marker Clusterer
MarkerManager MarkerManager

You can read about them on the provided link above. 您可以在上面提供的链接上阅读它们。

Marker Clusterer uses Grid Based Clustering to cluster all the marker wishing the grid. Marker Clusterer使用基于网格的聚类来聚集所有希望网格的标记。 Grid-based clustering works by dividing the map into squares of a certain size (the size changes at each zoom) and then grouping the markers into each grid square. 基于网格的聚类通过将地图划分为特定大小的正方形（每个缩放处的大小更改）然后将标记分组到每个网格方块来工作。

Before Clustering 在聚类之前

After Clustering 聚类后

I hope this is what you were looking for & this will solve your problem :) 我希望这是你正在寻找的，这将解决你的问题:)

#5楼

The size of array must be greater than zero. 数组的大小必须大于零。 Οtherwise you will have unexpected results. 否则你会有意想不到的结果。

function zoomeExtends(){var bounds = new google.maps.LatLngBounds();if (markers.length>0) { for (var i = 0; i < markers.length; i++) {bounds.extend(markers[i].getPosition());}    myMap.fitBounds(bounds);}
}

中心/设置地图缩放以覆盖所有可见的标记？相关推荐

uniapp 小程序 map设置地图缩放失效解决方法
原因uniapp map绑定的缩放等级,在鼠标或手指缩放后并没有更新值, 如果遇到需要修改缩放等级的情况会因为设置的值没改变导致地图没有更新 <map class="my_map&qu ...
echarts 与百度地图bmap结合系列：如何设置地图缩放级别和监听缩放事件
简单的demo: // ehcarts 的实例对象 this.myChart = echarts.init(el)// ehcarts加载完成事件 this.myChart.on('finished' ...
一张以你为中心的地图
想要创建以你为中心的地图,需要2步. 第一步,获取你所在地址第二步,将你的地址赋给中心点并创建地图. 1 申请账号 (1)本次,使用的腾讯的接口.要先申请key 从官网进入后,进入控制台.点击创建新 ...
Mapxtreme Java 地图缩放，平移操作的原理和实现
2019独角兽企业重金招聘Python工程师标准>>> 要想实现Mapxtreme Java 地图的缩放,平移操作,那么必须了解下Mapj这个对象,这个是官方文档对MapJ的名词解释 ...
腾讯地图的使用，添加多个标记和点击事件
腾讯地图API官网:http://lbs.qq.com/javascript_v2/index.html 根据经纬度获取详细地址此示例可以将经纬度(如:39.908823,116.39747)转换为 ...
Winform中设置ZedGraph鼠标滚轮缩放的灵敏度以及设置滚轮缩放的方式(鼠标焦点为中心还是图形中心点)
场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
android高德地图设置缩放级别,设置地图中心点/级别
html, body, #container { width: 100%; height: 100%; } 设置地图级别与中心点设置地图中心点随机地图层级 setZoom 随机地图中心点 setC ...
echarts中设置地图背景图片
1.geo设置背景 (设置 color) 官方属性说明实现效果: options配置: options: {tooltip: {triggerOn: `onmousemove`,trigger: ` ...
Map创建自定义图片图层，图片会随着地图缩放而缩放，uniapp、高德、腾讯、百度
场景:在项目开发中会遇到在map上绘制图层,一般想到的方法会是通过接口获取图层边界的所有点,由点生成polygons多边形面.polygons 多边形示例数据过多地图会存在卡顿的问题. 目的:创建自 ...

中心/设置地图缩放以覆盖所有可见的标记？

#1楼

#2楼

`fitBounds(bounds[, padding])`

#3楼

#4楼

#5楼

中心/设置地图缩放以覆盖所有可见的标记？相关推荐

最新文章

热门文章