vue高德地图JS API 实现海量点标记展示
官方文档：海量点标记-覆盖物-教程-地图 JS API | 高德地图API
需求：根据后台接口返回的部分数据，这里仅做展示 ，可参考使用。 可以加入弹窗点击的时候。
实现效果：
JSAPI 的加载
JS API 2.0 版本提供了两种方案引入地图 JSAPI：
1. 使用官网提供的 JSAPI Loader 进行加载；
2. 以常规 JavaScript 脚本的方式加载；
注意：为避免地图数据协议和前端资源不匹配导致页面运行报错，只允许在线加载 JSAPI，禁止进行本地转存、与其它代码混合打包等用法。
使用 JSAPI Loader (推荐)
JSAPI Loader是我们提供的 API 加载器，可帮助开发者快速定位、有效避免加载引用地图 JSAPI 各种错误用法，具有以下特性：
- 支持以 普通JS 和 npm包 两种方式使用；
- 有效避免错误异步加载导致的 JSAPI 资源加载不完整问题；
- 对于加载混用多个版本 JSAPI 的错误用法给予报错处理；
- 对于不合法加载引用 JSAPI 给予报错处理；
- 支持指定 JSAPI 版本；
- 支持插件加载；
- 允许多次执行加载操作，网络资源不会重复请求，便于大型工程模块管理；
- 支持IE9以上的浏览器，不支持IE8以下
注意（您在2021年12月02日申请以后的key需要配合您的安全密钥一起使用）
JSAPI key和安全密钥的使用
JSAPI key搭配代理服务器并携带安全密钥转发（安全）
1) 引入 JSAPI 使用 Loader 之前增加代理服务器设置脚本标签，设置代理服务器域名或地址，将下面示例代码中的「您的代理服务器域名或地址」替换为您的代理服务器域名或ip地址，其中_AMapService为代理请求固定前缀，不可省略或修改。 （注意您这 个设置必须是在加载loader.js的脚本引入之前进行设置，否则设置无效。）
实现代码
<template><div><div id="container"></div></div>
</template>安装@amap/amap-jsapi-loader
npm install @amap/amap-jsapi-loader --save
//或者
yarn add @amap/amap-jsapi-loader --save引入
import AMapLoader from "@amap/amap-jsapi-loader";方法
mounted() {this.loadmap();
}地图初始化配置
loadmap() {return new Promise((reslove, reject) => {AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填// version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等AMapUI: {// 是否加载 AMapUI，缺省不加载version: "1.1", // AMapUI 缺省 1.1plugins: [] // 需要加载的 AMapUI ui插件}}).then(AMap => {this.map = new AMap.Map("container", {resizeEnable: true,zoom: 4,center: [116.397428, 39.90923] //中心点坐标});//地图控件this.map.addControl(new AMap.Scale());this.map.addControl(new AMap.ToolBar());this.map.setZoom(14); //设置缩放大小this.handlePoint();reslove();}).catch(e => {console.log(e, "高德地图加载失败");reject(e);});});},实现海量点方法：
注意事项：
// 数据处理格式 const mapData =['经度1,纬度1','经度2,纬度2']
handlePoint() {AMapUI.load(["ui/misc/PointSimplifier"], (PointSimplifier,$) =>{if (!PointSimplifier.supportCanvas) {alert("当前环境不支持 Canvas！");return;}var pointSimplifierIns = new PointSimplifier({map: this.map, //所属的地图实例getPosition: (item) =>{if (!item) {return null;}var parts = item.split(",");//返回经纬度return [parseFloat(parts[0]), parseFloat(parts[1])];// return item;},getHoverTitle: (dataItem, idx) =>{return idx + ": " + dataItem;},renderOptions: {//点的样式pointStyle: {content:"custom_path",width: 6,height: 6,fillStyle: "rgba(153, 0, 153, 1)",},//鼠标hover时的title信息hoverTitleStyle: {position: "top"}}});window.pointSimplifierIns = pointSimplifierIns;this.$http.post("后端接口",{//传递的参数配置}).then((res)=>{// 测试数据// const mapData =[// '114.29816166666667,30.57257', // '114.28119666666667,30.552911666666667', // '114.3028,30.59048333333333', // '114.29160666666667,30.556718333333333', // '114.2914,30.56986', // '114.28456,30.553633333333334', // '114.28102666666666,30.558086666666668', // '114.30773333333333,30.59782', // '114.29436,30.56962', // '114.28113333333333,30.558556666666668', // '114.29082666666666,30.559493333333332', // '114.28120333333334,30.558518333333332', // '114.28676,30.567103333333332', // '114.28902666666667,30.56107', // '114.28892,30.55321', // '114.28824666666667,30.552106666666667', // '114.28989333333334,30.571036666666668', // '114.28078666666667,30.567476666666668', // '114.29738333333333,30.58175333333333', // '114.30185333333333,30.58015333333333', // '114.28097333333334,30.558096666666668', // '114.29002666666666,30.571', // '114.29001333333333,30.55475', // '114.30334666666667,30.59148', // '114.28780833333333,30.551283333333334', // '114.30313333333334,30.59095333333333', // '114.29437166666666,30.586803333333332', // '114.28254333333334,30.548951666666667'// ]// 接口获取到的数进行处理// 数据格式 const mapData =['经度1,纬度1','经度2,纬度2']let mapData= [];res.data.data.forEach(item=>{mapData.push(item.longitude+","+item.latitude)});console.log(mapData,"push数据");pointSimplifierIns.setData(mapData);}).catch();// pointMouseover pointMouseoutpointSimplifierIns.on("pointClick",(e, record)=> {// console.log(e.type, record);console.log(record.data);});});
}⭐️⭐️⭐️ 作者：船长在船上
vue高德地图JS API 实现海量点标记展示相关推荐
- 高德地图JS API之海量点标记十万以内的点
高德地图JS API之海量点标记十万以内的点 怎么引入高度地图就不写了,官方是这样说的:当需要在地图展示数量为十万以内的点并且需要较好的性能表现时,可以使用 AMap.MassMarks 类.AMap ...
- vue 给圆遮盖物添加文字 高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店 由 学院君 创建于2年前, 最后更新于 2年前 版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
- Vue 高德地图 js API Loca 如何使用 连接线图层、脉冲连线图层
Vue 高德地图 js API Loca 如何使用 连接线图层.脉冲连线图层 阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式 已经了解如何载入 Loca 插件 如果不了解,可以查看我之 ...
- 高德地图 JS API - 根据地名实现标记定位
德地图 JS API 使用前的准备工作请参考官方网站说明: https://lbs.amap.com/api/javascript-api/guide/abc/prepare 根据地名实现地图标记定位 ...
- 在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作 注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者 登陆之后,在进入「应用管理」 页面「创建新应用 ...
- cordova下使用高德地图js api在4g流量下定位失败问题的解决
问题描述 cordova页面中使用高德地图js api AMap.Geolocation的geolocation.getCurrentPosition()方法进行定位 用手机4g打开该页面,定位失败, ...
- 高德地图JS API 使用01
最近做项目,有个需求使用到高德地图JS API,现写博客总结一下. 需求要求大概是这样的: 使用地图高德或百度或谷歌都可以(这里吐槽一下,百度地图的jsAPI帮助文档写的太...谷歌你懂的...高德目 ...
- 高德地图js API实现鼠标悬浮于点标记时弹出信息窗体显示详情，点击点标记放大地图操作
高德地图js API实现:鼠标悬浮于点标记时,弹出信息窗体显示详情,点击点标记时放大地图 <!doctype html> <html> <head><meta ...
- 高德地图 js API Loca 3D动画的使用说明
高德地图 js API Loca 3D动画的使用说明 我们在使用 Loca 制作地图动画时,里面有几个对应的动画效果,有 center: 平移 pitch: 视角 zoom: 缩放 rotation: ...
最新文章
- 素数和_只愿与一人十指紧扣_新浪博客
- 【Irrlicht鬼火引擎】 安装配置Irrlicht鬼火引擎
- 使用DPM还原exchange 2013已删除邮箱数据
- 天线巴伦制作和原理_10米段的春天 | 用自制环型天线＋改装SDR接收器27MHz采访实录...
- CCF2016.4 - C题
- 如何在Eclipse中生成Native类对应的JNI的.h文件
- 全国加油站分布数据/停车场分布/公园分布/景区分布/保护区分布/2020年poi感兴趣点
- ffmpeg学习日记11-使用ffmpeg将视频格式转换为视频编码h264格式
- Python数据结构与算法视频教程-王宁宁-专题视频课程
- ImageAI的介绍（1）
- 不到一个月用业余时间撸了个App
- 《明朝那些事儿》心得体会
- html导航栏的颜色怎么改变,bootstrap如何更改导航栏颜色
- java public aspect_ASPECT Java的使用
- 怎样快速提高计算机能力,如何提高算术能力?不借助计算机、笔、纸等工具,怎么能快速心算出多位数计算结果?如：489x85 如：128965-98542有什么口决及速算的方法的详细步骤?...
- 软件需求包括3个不同的层次――业务需求、用户需求和功能需求
- openjudge7939_膨胀的木棍
- 百度图像识别API调用（python）
- 2、ENVI IDL学习笔记
- 计算机组成原理——作业2
热门文章
- 阿里云的大数据ACP认证含金量高吗？
- elasticsearch的master选举
- 用python实现等额本息
- 解决wordpress部分博客文章页面无法显示的问题
- 后台启动elastisearch-head,避免后台启动es head在关闭shell后es head自动关闭,网上一大堆错误的,这个是正解,来自互联网
- [RK3288][Android6.0] WiFi之cfg80211知识点小结
- Linux虚拟用户怎么建立,linux下ftp虚拟用户的创建方法
- html打开方式怎么没有反应,为什么我点开启程序没反应
- 根据脸部毛孔生长方向去护肤
- 【瑞芯微Rockchip Linux平台】SoftAp需求实现（3）动态获取BT Mac地址并更新beacon帧中的mac信息