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

最新推荐文章于 2024-05-27 15:10:35 发布
最新推荐文章于 2024-05-27 15:10:35 发布
阅读量2.1k 收藏 1
点赞数 4
分类专栏： 前端 Vue 文章标签： vue.js html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chendong0008/article/details/120504460
版权
Vue 同时被 2 个专栏收录
14 篇文章 0 订阅
订阅专栏
前端
13 篇文章 0 订阅
订阅专栏

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

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

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

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

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

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

会分享一些视频资源的哦

输入图片说明

 

SunGodD00
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
android 高德地图 marker点击无效_「干货」Vue+高德地图实现页面点击绘制多边形及多边形切割拆分...
weixin_35691715的博客
12-29 1233
作者：笙箫转发链接：https://juejin.im/post/5ea2b42bf265da47ce6cd127最终效果技术栈项目中使用到的技术 高德基于vue的vue-amap，组件使用的element，算法是用的turf.js配置步骤划分1.创建vue文件，项目中引入vue-amap 官方有两种引入方式，一种npm 安装，一种是cdn引入，这里我选择的是npm安卓的官方文档:vue-amap...
vue使用高德地图根据坐标定位点的实现代码
10-16
本篇文章将详细介绍如何在Vue项目中使用高德地图（AMap）根据坐标定位点的实现代码。 首先，我们了解高德地图API的引入和配置。在HTML页面中，需要引入高德地图的JS API，例如： ```html ***你的API密钥"> ``` ...
vue3在高德地图首次加载成功后，第二次加载容器消失，后续加载抛出map实例为空问题解决
weixin_43996368的博客
03-28 1227
这里的加载方法在其他项目里都是正常了，这次放入微服务里运行的时候发现多次加载地图会出现各种问题，采用新的JS API 2.0 版本中的JSAPI Loader进行加载。原先加载方式为JS API 引入地图。
Vue同一个页面不关闭，再次进入页面数据不刷新问题
小康师兄
02-02 4099
Vue同一个页面不关闭，再次进入页面数据不刷新问题 目录Vue同一个页面不关闭，再次进入页面数据不刷新问题一、问题描述二、问题分析三、问题解决3.1 方法一：watch监听$route的变化3.2 方法二：activated和deactivated四、漂亮的Ending 一、问题描述 从A列表页面跳转到B详情页面，第一次跳转，B详情页面的数据显示正常 从A列表页面选择了另一条数据，第二次跳转到B页面，B页面的数据不变，不更新 关闭B详情页面，再从A列表页面打开B，则数据显示正常 二、问题分析 数据刷新
vue2中高德Api的使用
最新发布
wcy0112的博客
05-27 432
容器 id 不能一样！！！不要忘记销毁地图组件。
高德地图API-vue2/3，问题：点位消失、掩模、标注层避让
小白正在变黑
12-20 569
高德地图点位消失，放大出现
vue高德地图每次请求数据，上次的覆盖物还会留下（.Marker；.Polygon）。解决清除上一次的覆盖物
Zzzzzzzzzzzke的博客
02-18 2806
在使用高德地图渲染的时候，会遇到在不刷新页面的情况下，重新去请求数据，会出现上次渲染的覆盖物还会留在地图上。这个时候只有刷新页面重新渲染dom才可以。 解决的办法： 在重新请求数据的时候定义一个getlists getlists: 1, // 判断重新请求数据的时候删除上次的覆盖物 接下来在请求数据的时候把getlists 赋值为2， this.getlists = 2; 最后在渲染的地方进行判断，当等于2的时候 remove,清除上次留下的覆盖物 ...
vue 弹窗_vue使用vue-AMap附加弹窗消息
weixin_39815600的博客
12-12 863
npm下载插件npm install vue-amap --save 在App.vue中写入 <template> <div id="app"> <div class="amap-page-container"> <div class="toolbar"> 当前坐标: {{ lng }}, {{ lat }} ...
关于高德地图Android开发时地图只显示一次、第二次打开不定位的解决办法
weixin_30335575的博客
09-16 483
我按照高德官方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
高德地图api地图与echarts图表引入刷新后不显示
likesleepingovo的博客
07-18 407
当页面刷新后，activated函数会在组件被激活时被调用。组件被激活的情况包括组件被插入到DOM中、组件的父组件被激活等。在activated函数中，你可以执行一些需要在组件被激活时进行的操作，例如重新加载数据、重新发送请求等。发现vue项目里引入高德地图api和echarts在刷新就会不见 ，只用修改部分代码，或者完全重新进入后才重新显示，经查询是应该除了初始化时的mounted，还要多调用activated。原因如下：在Vue.js中，当页面刷新后，组件的生命周期会重新开始。纯前端小白的发现和记录。
vue-cli中使用高德地图的方法示例
10-17
在创建应用时，可以指定使用地图服务的域名，这一点对于保证安全使用API密钥至关重要。 ### 2. 配置vue-cli项目 在vue-cli生成的项目中，通常会包含一个config目录，用于存放环境变量等配置文件。在config.js文件...
vue中使用高德地图-加载高德地图几种方法
03-12
### vue中使用高德地图-加载高德地图几种方法 #### 一、前言与基础知识 在当前的应用开发中，地图服务已经成为了不可或缺的一部分。无论是网约车应用还是生活服务类应用，地图服务都提供了强大的功能支持。本文将...
vue使用高德地图点击下钻上浮效果的实现思路
10-16
首先，要了解Vue框架的基本使用和高德地图API的调用方式，理解它们如何结合来实现地图功能。Vue是一个用于构建用户界面的渐进式框架，而高德地图API则提供了地图的展示和交互功能。 在实现点击下钻效果时，可以通过...
vue使用elementui结合高德地图的定位以及位置显示
11-25
在Vue.js应用中，ElementUI是一个非常流行的前端组件库，提供了丰富的UI元素和交互设计，而高德地图则是一款强大的地图服务提供商，提供地图展示、定位、路线规划等功能。将ElementUI与高德地图结合，可以创建出具有...
高德地图aMap.moveCamera(CameraUpdateFactory.zoomTo(15));方法不起作用。
热门推荐
gaoqingliang521的专栏
03-13 1万+
本文只为记录已解决bug之用。 bug说明： 在高德地图中我想通过aMap.moveCamera(CameraUpdateFactory.zoomTo(15));方法得到这样的效果 就是放大到自己想要的缩放比例 但是不管怎么aMap.moveCamera(CameraUpdateFactory.zoomTo(15));改这个参数都不起作用， 一直都这样的
vue项目中使用高德地图（多点定位，amap-vue引入 原生SDK 页面刷新后图层丢失）
weixin_45739279的博客
09-16 407
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项目中 高德地图总是出不来的问题
Baby_加油_的博客
05-18 1万+
111
vue中对于高德地图API的调用、js封装以及刷新后地图不显示为空白的原因
weixin_43996368的博客
08-06 6858
vue中使用高德地图 注意点： 1.使用地图必须定义容器大小，长宽固定 2.key值需自行申请key申请地址 <template> <div id="Maps" class="Maps"></div> </template> <script> </script> export default { data(){ return{ map: null
vue 弹窗组件加载高德地图组件第一次不显示地图 第二次才显示怎么解决
06-09
这个问题可能是因为高德地图组件需要在弹窗组件显示时才能初始化，但是在第一次加载时弹窗组件可能还没有完全渲染完成，导致地图组件无法正常显示。为了解决这个问题，可以尝试以下几个方法： 1. 在弹窗组件显示后，再手动调用地图组件的初始化方法，确保地图组件已经完全渲染完成，例如： ``` mounted () { this.$nextTick(() => { this.map = new AMap.Map('map-container', { center: [116.397428, 39.90923], zoom: 13 }) }) } ``` 2. 将地图组件的加载放在弹窗组件显示后的回调函数中，确保地图组件加载时弹窗组件已经完全渲染完成，例如： ``` methods: { openDialog () { this.showDialog = true this.$nextTick(() => { this.map = new AMap.Map('map-container', { center: [116.397428, 39.90923], zoom: 13 }) }) } } ``` 3. 将地图组件的加载放在弹窗组件的 activated 钩子函数中，确保每次弹窗组件激活时都重新加载地图组件，例如： ``` activated () { this.map = new AMap.Map('map-container', { center: [116.397428, 39.90923], zoom: 13 }) } ``` 以上三种方法都可以解决地图组件第一次不显示的问题，具体选择哪种方法取决于你的具体实现方式和需求。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值