1.4.15高德地图之点聚合异常报错 vg,ud

于 2024-04-29 10:46:46 发布
阅读量339 收藏 2
点赞数 5
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35452726/article/details/138304766
版权

前几天遇到一个这样的错误，就是

 报错的原因是因为地图中加入了点聚合，拖动后进行了地图缩放，所以就会出现以下错误，整了大概一天才找到原因，一开始换成了2.0的版本还是不行，后来直接找到了高德的技术支持反馈了，才知道

但是我用的是vue3，不要用 ref 定义，map.value 等这样调用会有问题,就直接定义地图实例的时候用var声明就解决了以上报错 

前端_彭于晏
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
高德地图点聚合插件AMap.MarkerClusterer报错Uncaught TypeError: Cannot read properties of null (reading ‘Md‘)
solo_exe的博客
08-25 3909
高德地图点聚合插件AMap.MarkerClusterer报错信息琢磨一天看不出是什么问题，测试之后发现报错原因是重复加载点聚合插件。
vue3 高德地图api加载热力图及关闭 JSAPI v1.4.15
最新发布
Koreyoshi123654的博客
07-12 248
vue3 高德地图api加载热力图 v1.4.15
高德地图放大标注点消失
qq_45934297的博客
03-15 703
在以前的项目中发现高德地图放大到最大的时候标注点消失了，调查了一下发现了zooms属性。
高德地图点聚合报错
css_javascrpit的博客
06-29 677
Cannat read praperties of undefined (reading "Vg”)覆盖物等等
高德地图创建Marker点,1.4.15版本
hzz490277727的博客
12-05 1320
本篇文章分享一下如何自定义创建一个或多个marker点1.首先引入高德地图的JavaScript API文件：
高德地图点聚合插件不生效
weixin_69724540的博客
11-30 908
高德地图点聚合插件不生效
高德API-1.4.15操作设置
weixin_70778799的博客
01-02 614
基本设置就是需要key和密钥，引入两个东西，拿网站举例如果出现没有。5、重点：出现了key和密钥，早年只用key就可以，但是现在如果你想使用POI搜索必须要两个都用放入你的代码中。如果只是简单的修复或调用可以使用→方式二直接引入，修改版本号。7、找到自己的要引入高德的版本如1.4.15（详细设置请看完《准备》这里的手册）8、测试引入第二个方式：填写你账号上新建应用的key和密钥两个不同的东西。1、首先进入高德API申请账号，认证个人或企业认证。）详细的引入方式在高德API的教程→准备。
高德地图 点聚合功能加点击事件
qq_40685103的博客
01-07 4088
效果展示 放大缩小地图层级时,点位会自动聚合或分散 主要用到的方法是 聚合点插件:AMap.MarkerClusterer 高德地图官方api：https://lbs.amap.com/api/javascript-api/reference/plugin#AMap.MarkerClusterer 开始要先引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己的key">&
web端高德地图显示坐标点
04-11
本文将深入探讨如何在Web端利用高德地图API显示坐标点，并结合jQuery实现交互功能。 高德地图API是高德地图提供的一套JavaScript库，允许开发者在网页上嵌入地图并进行各种自定义操作，如标注、路径规划等。首先，...
高德地图画线，单条多条带方向示例
08-28
高德地图作为国内主流的地图服务提供商之一，提供了丰富的API功能，其中包括在地图上绘制线路的能力。本篇将详细介绍如何在高德地图上实现单条或多条带有方向指示的线路绘制。 首先，我们需要了解高德地图...
JS基于高德地图定位城市闪烁特效
07-24
首先，高德地图API是高德地图提供的一套JavaScript接口，允许开发者在网页上集成地图功能，包括但不限于地图展示、地理编码、路线规划等。通过注册高德地图开发者账号并获取API密钥，我们可以将其嵌入到项目中以调用...
高德完全自定义点聚合，实现悬浮效果、选中效果
草稿记录站
02-06 1343
说明： 高德地图点聚合官方功能不能满足业务需求，此例子在完全自定义点聚合基础上增加悬浮与选中效果。 预览图： 在线预览： codepen 代码： 代码没有添加注释，只是自己的方式实现，如有疏漏，请多指正。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg
高德地图1.4.15楼层处理
星是河的眼的博客
08-17 564
接入了高德1.4.15JS API的项目中使用了mapStyle: ‘amap://styles/grey’,在这个模式下楼层几近透明，方案一是升级到2.0然后加wallColor（表示建筑物墙面的颜色）和roofColor（表示建筑物屋顶的颜色），但是升级到2.0之后问题很多。方案二是通过AMap.Buildings来设置楼层颜色。
高德地图API1.4.15较1.4.12的marker属性取值发生变化
weixin_30873847的博客
07-11 308
把高德地图从1.4.12升级到1.4.15后，出现了一些问题，之前设置的一些marker自定义属性不生效了。 检查代码后，原来是marker对象自身的属性设置路径改变了1.4.12版本是marker.D.xxx自定义属性，在1.4.15中不再是D.xxx了 所以需要把代码路径更改了。 转载于:https://www.cnblogs.com/runwithraining/p/1116...
vue3项目里关于mock.js和高德地图冲突问题
zhihua1231的博客
04-19 804
但是又有新问题 版本是1.4.15的 关于鹰眼和搜索提示的 api也要更换 （具体需要参考高德地图官网 1.4的版本）关于项目里有mock.js 引入2.0版本的高德地图 不加载地图原因是：mockjs会修改地图数据请求头的信息。2、或者把高德地图的版本降成1.4.15。1、直接把mock.js代码注释掉。
小白的高德地图初体验(二)——聚合点
陈怂怂的博客
12-01 1785
小白的高德地图初体验(二)——聚合点 说到高德地图，肯定要推荐官方文档，☛☛☛传送门，走你~~ ☞☞小白的高德地图初体验(一) —— 打点 ☞☞小白的高德地图初体验(二)——点聚合 ☞☞小白的高德地图初体验(三) —— 轨迹 ☞☞小白的高德地图初体验(四) —— 轨迹 ☞☞小白的高德地图初体验(五) —— 矢量图形 ☞☞小白的高德地图初体验(六)—— 信息窗体 今天又是被高德坑的一天，巨坑，也可能是我太菜了，那么直接看代码吧。 一、初始化 每次都从一张图开始，希望咱们都能成功哈~~~ <templa
高德地图scale缩放后地图上标记点位置偏移错位无法点击
qq_48627829的博客
11-28 1870
高德地图模式默认为2D模式 将viewMode设置为3D即可解决无法点击问题。
vue中使用高德地图聚合点功能
09-08
在Vue中使用高德地图的聚合点功能，首先需要安装并引入高德地图的JavaScript API。 1. 在`index.html`文件中，添加如下代码引入高德地图的API： ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=your_api_key"></script> ``` 其中，`your_api_key`是你在高德地图开放平台申请的API Key。 2. 在Vue组件中，首先在`mounted`生命周期钩子中初始化地图，并创建一个地图实例： ```javascript mounted() { // 初始化地图 AMap.initAMapApiLoader({ key: 'your_api_key', plugin: ['AMap.MarkerClusterer'] }); // 创建地图实例 this.map = new AMap.Map('mapContainer', { center: [lng, lat], // 地图中心点经纬度 zoom: 13 // 地图缩放级别 }); } ``` 3. 在数据加载完成后，将需要聚合的点数据添加到地图上： ```javascript addMarkers() { this.points.forEach(point => { let marker = new AMap.Marker({ position: [point.lng, point.lat] // 标记点位置经纬度 }); this.map.add(marker); }); } ``` 其中，`this.points`是包含标记点经纬度的数组。 4. 最后，启用聚合点功能，将添加的标记点进行聚合： ```javascript clusterMarkers() { let cluster = new AMap.MarkerClusterer(this.map, this.map.getAllOverlays(), { gridSize: 80, // 聚合点的像素大小 renderCluserMarker(cluster) { let count = cluster.getMarkers().length; let div = document.createElement('div'); div.className = 'cluster-marker'; div.innerHTML = count; return new AMap.Icon({ size: new AMap.Size(40, 40), image: 'cluster.png', imageSize: new AMap.Size(40, 40), // 自定义聚合点的样式和内容 div: div }); } }); } ``` 通过`AMap.MarkerClusterer`类创建一个聚合器对象，将地图实例、添加的标记点和聚合选项传入。 以上就是在Vue中使用高德地图聚合点功能的基本步骤。根据实际需求，可以进一步添加交互、自定义样式等功能。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端_彭于晏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值