【VUE】web高德地图海量点标记,全部居中显示在屏幕中

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 = nulllet west = nullfor (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 = nulllet east = nullfor (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 无效。

【VUE】web高德地图海量点标记,全部居中显示在屏幕中相关推荐

vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
vue 使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件
目录一.需求二.引入高德地图 2.1.将高德地图引入到项目中 2.2.查看官网快速上手,熟悉高德地图的主要API 2.3.海量点标注要用到的API文档 2.4.全部代码其他: 一.需求因为不知 ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
vue调用高德地图实现定位
vue调用高德地图实现定位第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap impor ...
使用vue和高德地图，仿58地图找房pc端，且解决marker过多卡顿
使用vue和高德地图,仿58地图找房pc端,且解决marker过多卡顿 1.在index.html引入高德地图链接 https://webapi.amap.com/maps?v=1.4.15& ...
高德地图实现marker标记,Text多点文本标记,标记信息窗体,手动选点功能
1.marker标记,Text多点文本标记,标记信息窗体效果: 代码: <!DOCTYPE html> <html> <head><meta charset ...
快速掌握Web高德地图开发
本文章致力于帮助对Web高德地图开发感兴趣的朋友快速掌握开发要领,如果能对屏幕前的您有所助益,我将十分荣幸. 如何快速掌握Web高德地图开发? 要领如下: 一. 首先要知道高德地图本身有提供开放的地图 ...
vue 使用高德地图（vue-amap）记录
vue 使用高德地图 (vue-amap)记录效果图第一步下载vue-amap依赖: npm install vue-amap --save 高德地图ui:https://lbs.amap.co ...
vue使用高德地图小demo（标记点，画线，3D，叠加图片图层）
vue使用高德地图小demo(标记点,画线,3D) 这个模式是3D的,可以看到地图是带有一定的倾角的. 注意:3D模式下,是不能够将进行画线的,不能使用PathSimplifier,改成2D可以正常使 ...

【VUE】web高德地图海量点标记,全部居中显示在屏幕中

【VUE】web高德地图海量点标记,全部居中显示在屏幕中相关推荐

最新文章

热门文章