【VUE】web高德地图海量点标记,全部居中显示在屏幕中
官方示例中setFitView()对AMap.Marker可以生效,但对海量点标记 AMap.MassMarks 似乎无效Map类有一个方法setBounds也能实现重新调整视角:https://lbs.amap.com/api/javascript-api/reference/map// <script> 中引入高德地图import AMap from 'AMap'var map//
·
Map类的setBounds方法可以重新调整视角,让所有点标记全部居中显示在屏幕中。亲测有效,整理了一下笔记如下:
https://lbs.amap.com/api/javascript-api/reference/map
// <script> 中引入高德地图,并定义全局map
import AMap from 'AMap'
var map
// 1、获取到后台返回的坐标数据后,处理数据,并生成坐标点到地图上;
// 2、让所有点全部居中显示在屏幕中,点坐标数组对应以下方法格式
var arr = [
{ longitude: 113.753156, latitude: 38.781951 },
{ longitude: 116.2086, latitude: 39.729813 },
{ longitude: 115.2086, latitude: 39.029813 }
]
const sw = getSW(arr) // 循环所有的点标记,返回最西南的一个经纬度
const ne = getNE(arr) // 循环所有的点标记,返回最东北的一个经纬度
var mybounds = new AMap.Bounds(sw, ne) // sw, ne > [xxx,xxx], [xxx,xxx]
map.setBounds(mybounds)
以下是自定义的函数,返回最西南、最东北坐标。具体结构可根据自身拿到的数据结构进行更改!
/**
* 坐标集合的最西南角
* @param {*} list
* list 是接口获取的点 的数组
*/
export const getSW = (list) => {
let south = null
let west = null
for (let item of list) {
if ((west && item.longitude < west) || !west) {
west = item.longitude - 0.7
}
if ((south && item.latitude < south) || !south) {
south = item.latitude - 0.7
}
}
return [west, south]
}
/**
* 最东北角
* @param {*} list
*/
export const getNE = (list) => {
let north = null
let east = null
for (let item of list) {
if ((east && item.longitude > east) || !east) {
east = item.longitude + 0.7
}
if ((north && item.latitude > north) || !north) {
north = item.latitude + 0.7
}
}
return [east, north]
}
官方示例中的setFitView()对AMap.Marker也可以生效,但对海量点标记 AMap.MassMarks 无效。
更多推荐
已为社区贡献15条内容
所有评论(0)