vue使用高德地图第一次进去点标记有数据，第二次进去就没有了

最新推荐文章于 2024-09-10 15:55:27 发布
最新推荐文章于 2024-09-10 15:55:27 发布
阅读量2.3k 收藏 1
点赞数 4
分类专栏： 前端 Vue 文章标签： vue.js html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chendong0008/article/details/120504460
版权

在工作中网页使用到了高德地图的点标记组件

需求：在地图上显示从后端返回经纬度坐标的点。

技术选型： 前端移动端网页使用vue3.x + 高德地图

问题：在首次进入地图页面的时候会出现对应的点标记，但是第二次进去的时候或者后面进去的时候不出现这个点标记。

 解决办法： 我发现了一个可能存在的问题就是会不会当我返回到其他页面的时候这个地图其实没有销毁，需要销毁掉然后才能重新建标记点？对于这个问题进行尝试就是在页面的beforeRouteLeave的时候去卸载掉高德地图，然后再重新进入。最后发现就是这个问题导致不会展示再页面上。

顺便分享一波个人公众号,关注关注我呗，分享一些你们需要的资源，大家一起进步。

会分享一些视频资源的哦

输入图片说明

 

android 高德地图 marker点击无效_「干货」Vue+高德地图实现页面点击绘制多边形及多边形切割拆分...
weixin_35691715的博客
12-29 1343
作者：笙箫转发链接：https://juejin.im/post/5ea2b42bf265da47ce6cd127最终效果技术栈项目中使用到的技术 高德基于vue的vue-amap，组件使用的element，算法是用的turf.js配置步骤划分1.创建vue文件，项目中引入vue-amap 官方有两种引入方式，一种npm 安装，一种是cdn引入，这里我选择的是npm安卓的官方文档:vue-amap...
vue使用高德地图画电子围栏_高德地图 自动生成电子围栏
weixin_39734020的博客
12-22 1576
使用高德地图js api 自动画出电子围栏因直接画多边形不太准确，需要沿路来画围栏电子围栏思路：1. 找到原点经纬度 xconst CENTER = [116.397504,39.89619]const DISTANCE = 300 //单位mconst map = new AMap.Map("container", {center: CENTER,zoom: 14});2. 根据x点在地图上画...
vue3在高德地图首次加载成功后，第二次加载容器消失，后续加载抛出map实例为空问题解决
weixin_43996368的博客
03-28 1454
这里的加载方法在其他项目里都是正常了，这次放入微服务里运行的时候发现多次加载地图会出现各种问题，采用新的JS API 2.0 版本中的JSAPI Loader进行加载。原先加载方式为JS API 引入地图。
Vue3使用地图进行展示标记点，第二次进入标记点未正常显示问题
小怪獸丶的糖的专栏
09-10 440
setup() {// 初始化地图center: [x, y], // 设置中心点zoom: 18, // 设置缩放级别});// 添加标记title: "优称智能",});});// 清理地图实例});
vue3高德地图多个点标记/窗口信息/点标记自定义图片不显示问题
m0_58293192的博客
12-07 3265
vue3高德地图多个点标记/窗口信息/点标记自定义图片不显示问题
vue 弹窗_vue使用vue-AMap附加弹窗消息
weixin_39815600的博客
12-12 969
npm下载插件npm install vue-amap --save 在App.vue中写入 <template> <div id="app"> <div class="amap-page-container"> <div class="toolbar"> 当前坐标: {{ lng }}, {{ lat }} ...
vue 高德地图绘制覆盖物时使用的一些方法
weixin_46328739的博客
06-15 484
vue 中使用高德地图，绘制marker及聚合 根据经纬度数组计算出一个合适的地图缩放级别，以便同时显示所有的覆盖物。 计算给定经纬度数组的平均值 当用户拖动或缩放地图时，您可能想要重新加载某些地图数据，以便只显示在新地图视窗中可见的数据
vue3.0项目引入高德地图
W_Venus的博客
04-21 7581
记一次vue3.0项目引入高德地图，凑合看，勿喷
VUE3+Ts使用高德地图组件@vuemap/vue-amap语法检测Amap is not defind
Mr_simoon的博客
03-20 6142
第二种，如果不是eslint语法检测的问题，那就是TS的语法检测了，可以设置declare let Amap :any 或者使用TS的单行忽略 “// @ts-ignore” 就跟写注释一样，我试了结果可行，但是因为我要使用很多次new Amap ，所以暂时作为备选方案。第三种，既然Amap没有找不到，那我们就自己对外暴露一个Amap，里面包含常用的地图API不就行了，创建该文件src\types\Amap.d.ts，在tsconfig.json配置文件添加。下面是Amap.d.ts的内容，可以直接复制。
让高德地图上点标记显示发光效果
alla319720的博客
10-16 2139
　　第一次写东西，技术水平不是很高，只是为了方便记忆。 　　最近项目中有一个在地图上显示定位的需求，这本来没什么，只要初始化一个地图，将后台传过来的定位信息通过高德API在地图上显示就行了，最主要的是需要让点像光源一样有闪烁的效果，本来是想在网上找一下copy的，结果没找到。所以自己研究了一下。 　　为了方便记忆，所以会将从怎么创建地图，到显示定位点的整个过程纪录下来。 　　首先声...
关于高德地图Android开发时地图只显示一次、第二次打开不定位的解决办法
weixin_30335575的博客
09-16 546
我按照高德官方Demo改的 第一次是可以定位的，如左图 第二次就不能定位了，如右图 在onDestory中把aMap置为空即可 aMap = null; 修改完如下图： 原理是第二次打开时aMap不为空，无法从mapView中getMap获取数据。 转载于:https://www.cnblogs.com/zhangjiuding/p/753...
vue异步加载amap高德地图,解决刷新浏览器地图不显示问题
hcg012的博客
06-16 1万+
创建amap.js /* * 异步创建script标签 */ export default function MapLoader () { return new Promise((resolve, reject) => { if (window.AMap) { resolve(window.AMap) } else { var url = 'https://webapi.amap.com/maps?v=1.4.15&key=2e91f494321
高德地图放大标注点消失
qq_45934297的博客
03-15 1278
在以前的项目中发现高德地图放大到最大的时候标注点消失了，调查了一下发现了zooms属性。
高德地图aMap.moveCamera(CameraUpdateFactory.zoomTo(15));方法不起作用。
热门推荐
gaoqingliang521的专栏
03-13 1万+
本文只为记录已解决bug之用。 bug说明： 在高德地图中我想通过aMap.moveCamera(CameraUpdateFactory.zoomTo(15));方法得到这样的效果 就是放大到自己想要的缩放比例 但是不管怎么aMap.moveCamera(CameraUpdateFactory.zoomTo(15));改这个参数都不起作用， 一直都这样的
vue使用leaflet中页面间切换之后地图就不见了，还报 map container is already initialized
梨子社区
10-18 825
vue使用leaflet中页面间切换之后地图就不见了，还报 map container is already initialized。
vue项目中使用高德地图（多点定位，amap-vue引入 原生SDK 页面刷新后图层丢失）
weixin_45739279的博客
09-16 482
vue项目中使用高德地图（多点定位，amap-vue引入 原生SDK 页面刷新后图层丢失） 一、引入高德地图 两种方式，一种是直接引入原生高德，太麻烦懒得用，第二种是引入amap-vue，我用的是第二种。 安装 npm install vue-amap main.js中引入 // 高德地图 import Vue from 'vue' import VueAMap from 'vue-amap'; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key:
vue高德地图每次请求数据，上次的覆盖物还会留下（.Marker；.Polygon）。解决清除上一次的覆盖物
Zzzzzzzzzzzke的博客
02-18 3235
在使用高德地图渲染的时候，会遇到在不刷新页面的情况下，重新去请求数据，会出现上次渲染的覆盖物还会留在地图上。这个时候只有刷新页面重新渲染dom才可以。 解决的办法： 在重新请求数据的时候定义一个getlists getlists: 1, // 判断重新请求数据的时候删除上次的覆盖物 接下来在请求数据的时候把getlists 赋值为2， this.getlists = 2; 最后在渲染的地方进行判断，当等于2的时候 remove,清除上次留下的覆盖物 ...
vue项目中 高德地图总是出不来的问题
Baby_加油_的博客
05-18 1万+
111
关于vue开发中，高德地图有时不显示的问题
zzzzzzzi111的博客
07-30 1241
关于vue开发中，高德地图有时不显示的问题
若依框架 高德地图
最新发布
03-08
### 若依框架中集成高德地图 若依框架是一个基于Spring Boot和Vue.js的企业级开发平台，提供了丰富的前后端分离功能模块。要在若依框架中集成高德地图，主要涉及前端的地图展示以及可能的后端数据交互。 对于前端部分，在Vue环境中集成高德地图可以通过引入官方JavaScript API来完成[^1]。具体操作包括： - **创建HTML页面**：在需要显示地图的地方准备一个`div`容器。 - **加载API脚本**：通过`<script>`标签或者使用Webpack等工具将高德地图JS API加入到项目依赖中。 - **初始化MapView对象**：利用JavaScript代码实例化MapView，并设置其属性如中心点坐标、缩放级别等参数。 ```html <!-- HTML结构 --> <div id="container"></div> <script type="text/javascript"> var map = new AMap.Map('container', { zoom: 10, center: [116.397428, 39.90923], // 设置地图中心点经纬度 }); </script> ``` 考虑到若依框架本身具备完善的权限管理和接口调用机制，因此当涉及到地理位置相关的业务逻辑处理时（比如获取当前位置），可以在后台编写相应的Controller接收请求并向客户端返回所需的数据；而这些数据可以直接作为输入传递给前端用来更新地图上的标记或其他UI元素[^2]。 另外值得注意的是，如果希望进一步简化开发流程，则可以选择第三方库或插件辅助实现这一目标。例如针对Flutter有专门适配的flutter_amap插件[^3]，虽然这不是专门为若依定制的产品，但是类似的思路也可以应用于其他技术栈之上——即寻找适合特定环境下的封装好的组件来进行二次开发。 #### 关于API密钥的安全管理 无论采用哪种方式接入服务，都应当妥善保管好分配给应用的API key。建议仅限于内部网络环境下测试阶段暴露key信息，在生产部署前务必采取措施保护敏感资料不被泄露出去。这通常意味着要遵循安全编码实践，比如不在公开可访问的源码文件里硬编码密钥字符串，而是借助环境变量或者其他形式的安全存储方案来动态注入必要的认证凭证[^5]。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值