【高德地图】易采坑合集

1. HeatmapLayer 热力图层透明度opacity属性设置无效

热力图层必须是数组

2. 降低[point]自带文字透明度

将叠加图层的zIndex设置到很高即可降亮度

3. vue页面切换后autocomplete功能失效

因为各页面该功能id相同，不同页面需要使用不同的id

4. PolyonLayer 区面图层点击图形无法获取数据（鼠标事件无效）

eventSupport属性默认为false，需要设置为true鼠标事件才生效

var layer = new Loca.PointLayer({eventSupport: true,map: map
});

5. npm引入报错 TypeError: Loca.XX is not a constructor

按官方教程引入，将版本2.0改为缺省版本即可

import AMapLoader from '@amap/amap-jsapi-loader'AMapLoader.load({key: '', // 申请好的Web端开发者Key，首次调用 load 时必填version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: [],Loca: {// 是否加载 Loca， 缺省不加载version: '1.3.2' // Loca 版本，缺省 1.3.2}}).then(() => {this.map = new AMap.Map('amap', {features: ['bg', 'road', 'building', 'point'],// mapStyle: "amap://styles/darkblue",center: this.center,pitch: 0,zoom: this.zoom,viewMode: '2D'})// 热力图层this.layerHeat = new Loca.HeatmapLayer({map: this.map})}).catch((e) => {console.log(e)})

6.高德地图第一次打开时热力图不显示，切换到别的页面再切换回来显示正常

问题描述
执行顺序

加载地图
加载热力图插件
加载热力图数据

     this.loadAMap();this.initHeatMapLiveApp();// 加载地图loadAMap () {this.aMap = new AMap.Map("performance", {animateEnable: true,resizeEnable: true,center: this.center,zoom: 13,mapStyle: "amap://styles/darkblue"});this.loadHeatPlugin();},// 加载热力图插件loadHeatPlugin () {this.aMap.plugin(["AMap.Heatmap"], () => {this.heatMap = new AMap.Heatmap(this.aMap, {radius: 30,opacity: [0, 0.7],gradient: {0: "blue",0.25: "rgb(117,211,248)",0.5: "rgb(0, 255, 0)",0.75: "#ffea00",1.0: "red"}});});},// 加载热力图数据initHeatMapLiveApp () {...this.heatMap.setDataSet({ data: this.heatdata});},

问题原因

加载热力图插件plugin是异步的，第一次打开，请求完数据执行this.heatMap.setDataSet({ data: this.heatdata});时，热力图 this.heatdata还没有加载好。

解决方案
加载完插件再请求数据

this.loadAMap();// 加载热力图插件
loadHeatPlugin () {this.aMap.plugin(["AMap.Heatmap"], () => {this.heatMap = new AMap.Heatmap(this.aMap, {radius: 30,opacity: [0, 0.7],gradient: {0: "blue",0.25: "rgb(117,211,248)",0.5: "rgb(0, 255, 0)",0.75: "#ffea00",1.0: "red"}});//加载完插件再请求数据this.initHeatMapLiveApp();});},

【高德地图】易采坑合集相关推荐

加入域时出现以下错误登陆失败该目标账户名称不正确_微信支付踩坑合集：微信小程序支付失败是什么原因?持续更新...
微信小程序开发的过程一定会遇到各种问题,最让人棘手的就是支付问题,因为没有支付做商城类似的小程序就没有办法完成最关键的一步.那么支付失败到底什么原因呢?一下子收集了几个错误类似,希望对你有帮助: No ...
[踩坑合集] 双linux系统卸载/安装，nvidia驱动安装，引导项缺失，开机黑屏，nvidia-smi和nvcc -v CUDA版本不匹配
"个人文化属性" 双系统 1. 双linux系统格式化一个linux系统 2. 安装新的20系统(双系统) 3. 重启后直接进入grub界面(修复它) 3.1 寻找你的系统分区 3 ...
疑难杂症之各种小坑合集
踩坑小合集前言正文 Spring注解相关一.@Async注解导致项目启动时提示循环注入错误 more and more 更多内容敬请期待,在闲暇之余都会记录上比较有趣的坑 !!!欢迎大家一起讨论 ...
关于集成第三方微信支付，支付宝，高德地图等排坑
高德地图定位: 大家仔细检查key 千万不要搞错了 @OnPermissionDenied(Manifest.permission.ACCESS_FINE_LOCATION) void showDen ...
vue 高德地图api爬坑之路（一）初始化
由于使用vue-amap插件有点问题,所以使用了原生高德地图api. 集成: public/index.html 添加 <script type="text/javascript&qu ...
搭建风控系统道路上踩过的坑合集
作者前言从业近10年,大大小小参与了3家公司不同领域的风控系统的设计,从前到后把风控系统所有环节都细细的琢磨过,然而至今仍然感觉刚刚一只脚踏进门而已. 大多数人做的产品都是目的明确的,比如订单支付. ...
vue 高德地图api爬坑之路（三）Autocomplete 和 PlaceSearch
添加页面控件 <div class="search-div" ><el-input id="tipInput" v-model="i ...
微信小程序开发踩坑合集
微信搜索:凯小白学编程回复小程序领取1000套小程序源码本文分享一下开发小程序是遇到的一些问题.展示了曾经开发过的两个小程序中遇到的坑下一篇文章预告:<Maven入门> ...
从一道面试题说起—js隐式转换踩坑合集
前方提醒: 篇幅较长,点个赞或者收藏一下,可以在下一次阅读时方便查找提到js的隐式转换,很多人第一反应都是:坑. 的确,对于不熟悉的人来说,js隐式转换存在着很多的让人无法预测的地方,相信很多人都深 ...

【高德地图】易采坑合集

1. HeatmapLayer 热力图层透明度opacity属性设置无效

2. 降低[point]自带文字透明度

3. vue页面切换后autocomplete功能失效

4. PolyonLayer 区面图层点击图形无法获取数据（鼠标事件无效）

5. npm引入报错 TypeError: Loca.XX is not a constructor

6.高德地图第一次打开时热力图不显示，切换到别的页面再切换回来显示正常

【高德地图】易采坑合集相关推荐

最新文章

热门文章