新建点位获取地理信息

新建点位时要拿到地理信息，使用高德地图引擎提供的地理编码能力可获取真实的地理信息，还要考虑在部分地图位置上新建点位时获取不到经纬度信息的情况。

开启高德引擎的地理编码能力，首先是使用的key值必须是web端(JS API)，其次是key值要和安全密钥一起使用，所以要在全局注册安全密钥。

window._AMapSecurityConfig = {securityJsCode: 'xxxx', // 高德地图 key值对应的密钥
}

开启地理编码功能

// 在高德地图加载完成后即可开启此功能
window.AMap.plugin(['AMap.Geocoder'], () => {this.geocoder = new window.AMap.Geocoder();},
)

获取地理信息，进行新建点位操作。

addPoint(e) {this.geocoder.getAddress(e.lnglat, (status, result) => {if (status === 'complete' && result.info === 'OK') {this.marker = new window.AMap.Marker({position: e.lnglat,anchor: 'bottom-center',offset: new window.AMap.Pixel(0, 0),content: 'xxxxx', // 内容省略了map: window.map,});} else {// 获取不到经纬度信息的情况this.$message.warning('此位置无经纬度，无法新建点位');}});
}

点位渲染

点位渲染实现思路

考虑到大数据点位性能问题，加入了点位聚合的方案，又考虑到浏览器内存的问题，最终采用了点位后端聚合的方案。
由于是后端聚合，所以在绘制点位实例时，不能直接使用icon图标，要使用content进行自定义点位内容，主要是为了方便绘制聚合点与聚合数量。
前端在每次地图可视区移动结束后，会重新调取获取点位接口进行点位重绘，入参为基础的当前地图可视区经纬度和当前地图层级。
所有的点位实例要存储在一个对象中，这样点位实例可进行统一管理，方便查询与获取，点位名称的显示与隐藏也可进行统一处理。

自定义点位内容

点位渲染分为聚合点位渲染与非聚合点位渲染，聚合点位只需要绘制在地图上即可，非聚合点位在绘制在地图上后还需要监听点击等事件，进行后续需求梳理。
点位的渲染采用自定义点位内容content的形式，根据不同的点位图标渲染成不同的点位样式。

自定义点位内容content的方式有多种，提供两种简单思路：

 // 方式一，css中自己写content的样式marker = new window.AMap.Marker({position: v.lnglat,anchor: 'bottom-center',offset: new window.AMap.Pixel(0, 0),content:  `<div class="content" style="width:32px;background-image:url(${getIconName(v.icon)}.svg)"></div>`,}// 方式二，css中自己写content的样式marker = new window.AMap.Marker({position: v.lnglat,anchor: 'bottom-center',offset: new window.AMap.Pixel(0, 0),content:  this.contentDOM(list),}contentDOM(list) {const htmlDom = document.createElement('div');htmlDom.setAttribute('class', 'content');list.forEach((v) => { // list为设备列表const img = document.createElement('img');img.src = `xxxxx.svg`;img.onload = () => {htmlDom.appendChild(img);};});return htmlDom;},

点位名称显示与隐藏

地图上所有点位的名称的显示与隐藏可通过点位的label值进行控制。
当需要显示点位名称时，设置一个label值即可，当需要隐藏点位名称时，label值赋值空字符串即可。

// 显示点位名称
target.setLabel({content: `xxxxxx`,direction: 'bottom',
});
// 隐藏点位名称
target.setLabel({content: '',direction: 'bottom',
});

高德地图JSAPI点位相关操作相关推荐

高德地图JSAPI的使用注意项
前言最近有个项目用到了高德地图,基于高德引擎进行相关需求的开发,开发过程中碰到了一些问题,简单的记录一下. 选择高德地图那肯定是因为买了高德地图的什么东西哈哈哈,就是可以基于高德引擎进行开发并且部 ...
高德地图轨迹PHP,高德地图JSAPI轨迹重复绘制
介绍一个基于高德地图JSAPI轨迹展示案例: 说明: 1.定时接口取数据刷新轨迹: 2.轨迹坐标数量较大: 3.轨迹点位信息需要展示,如时间.速度.多少点位: 4.避免地图重新渲染,只刷新坐标: 使用 ...
vue2实现高德地图 JSAPI 2.0可拖拽的路线规划(DragRoute)组件实现对每个经过点设置不同的经过点名称
问题记录 vue2实现高德地图 JSAPI 2.0可拖拽的路线规划(DragRoute)组件实现对每个经过点设置不同的经过点名称官方文档及示例 DragRoute相关API API中没有任何方法让我 ...
基于高德地图JsAPI进行浏览器精确定位，实现手机端考勤打卡功能
前言: 由于项目需求需要在项目中实现手机端(基于网页)考勤打卡功能,最初考虑使用H5自身定位功能,但尝试过后,效果很不稳定.然后尝试使用百度地图JsAPI,百度家的稳定倒是很稳定,没想到的是定位位置和 ...
基于高德地图的描点操作，监听地图缩放，展示合理数量的marker
原文:基于高德地图的描点操作,监听地图缩放,展示合理数量的marker 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/lx583274568/art ...
java js 高德api_高德地图JSApi
火星坐标获取demo #iMap{height:500px;width:600px;float:left;} .info{float:left;margin:0 0 0 10px;} label{wi ...
使用高德地图展示点位和信息窗体展示数据及播放视频
使用高德地图做了一个在地图展示点位,并通过点击,显示直播的功能,这个任务是为了之后大屏做准备. 这是一个能展示多个点标记,并在点击的时候弹出信息窗体,并在信息窗体中播放视频,且展示相关信息以及操作事件 ...
高德地图简单点位+轨迹+描述
1.本文代码基于vue3 setup模式,简单的高德地图开发.-2023.03.23 2.以下是相关代码 <script setup> import AMapLoader from '@a ...
高德地图JSAPI测距功能优化
文章目录前言测距实现思路使用测距插件开启测距关闭测距前言高德提供了一个距离测量插件可直接使用,但是没有完全满足需求.在测距过程中只会显示新增节点到起始点的总长度,而不会在鼠标移动过程中显 ...
高德地图jsapi marker.markOnAMAP报错
当使用的最新jsapi2.0的时候,我们按照示例用js唤起高德地图APP时候报错 marker.markOnAMAP({name:'首开广场123',position:marker.getPositi ...

高德地图JSAPI点位相关操作

文章目录

新建点位获取地理信息

开启地理编码功能

点位渲染

点位渲染实现思路

自定义点位内容

点位名称显示与隐藏

高德地图JSAPI点位相关操作相关推荐

最新文章

热门文章