vue 使用高德地图、腾讯地图实例化对象报错或地图异常

MorrisGeek

已于 2023-04-28 16:48:14 修改

阅读量3.2k

点赞数 4

分类专栏： vue报错文章标签： vue.js javascript 前端

于 2022-06-09 11:32:49 首次发布

本文链接：https://blog.youkuaiyun.com/m0_49239918/article/details/125199600

版权

在Vue.js应用中，使用高德地图或腾讯地图时，通过new关键字实例化对象可能导致与Vue的冲突，引起报错。问题主要出现在Vue2和Vue3中，由于地图对象的生命周期与Vue组件的生命周期不匹配。为了解决这个问题，应当避免将地图实例置于Vue的响应式系统中，确保地图API的实例化不被Vue管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

vue 中使用地图的时候，实例化的对象用 data 或 ref 、reactive 来管理会导致报错。

大概原因是地图对象内部处理与 vue 冲突，目前在高德、腾讯都碰到了，各厂应该都会有类似问题。

所有使用 new TMap.xxx 的实例化对象都不应被 vue 管理（包括高德 AMap 等）

报错示例

腾讯地图

腾讯地图报错

高德地图

vue2

let map
data () {
   
  return {
   
    circle:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

MorrisGeek

关注关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue3接入腾讯地图后遇到的错位问题探究

峰会路转的博客

09-30

1113

静下心来想想，不对啊，接口数据没问题，不是后台的事，那尼玛甩不了锅了，我还能安心吃饭睡觉吗啊，于是一番百度，没有这个问题，我就问就没人遇到过这个问题吗，一条相关资料都没有啊，惨惨惨~~~但是，然而，构建上线后就让人摸不着头脑了，进入编辑页面的时候，地图出现了，如下效果，css错位了，他就错位了，防不胜防的那么一下啊~~~排查了大半天，终于没白忙活了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~对，没看错，上线后就是这样了，中间空白了一大片，地图往下面跑了，不知道就这么抽风了。

王二红

09-09

3426

vue2，nuxt2，天地图，视图，卫星，地图类型切换，vue天地图，改成卫星视角，在线地图切换，来回切换卫星图，天地图如何实现来回切换卫星图，地形图，卫星视图，vue中使用天地图自定义样式切换地图图层，切换报错，加载出错，卫星图太卡，地图图层更换，vue安装集成天地图详细示例源码，切换地图的样式，在天地图中如何将地图的类型随意更换，提供多种视图模式用户自由点击更换，VUE引入天地图卫星版，详细教程示例源码代码，天地图切换卫星用什么api，卫星视角API方法，vue2卫星天地图，能改地图的显示方式，图层类型

参与评论您还未登录，请先登录后发表或查看评论

vue 使用腾讯地图API报错 Failed to execute ‘postMessage‘ on ‘Worker‘: [object Object] could not be cloned

MorrisGeek的博客

03-09

9307

文章目录述版本上代码vue 2.x 选项式APIvue 3.x 组合式API（setup）述最近在项目中用到腾讯地图点标记功能（MultiMarker）。发现在更新点数据的时候发生报错，怀疑是Vue的响应代理导致的。 Uncaught DOMException: Failed to execute 'postMessage' on 'Worker': [object Object] could not be cloned. 已发现受影响的方法 setGeometries() updateGeomet

vue引用腾讯地图报‘TMap‘ is not defined,解决方法

kukulei2211的博客

07-12

1万+

根据腾讯地图官方文档引入直接在vue中引入后会出现’TMap’ is not defined问题解决办法：只需将<script src="https://map.qq.com/api/gljs?v=1.exp&key=****-****-****-****"></script> 放到public/index.html文件里，其他不用改变大部分文档都是这么解决的，但我遇到了很恶心的一点，找了很多文档，都没解决’TMap’ is not defined这个问题，之

vue3 调用腾讯地图

最新发布

m0_46068617的博客

03-22

349

在vue的 index.html 添加如下代码。2 然后安装 vue-jsonp。

记录tmap-vue腾讯地图组件Vue2使用遇到的问题

weixin_44217374的博客

05-24

1142

tmap不兼容Vue2，但是又不想自己去封装，然后就去找找看有没有办法可以兼容，哎！这不就发现竟然还真的可以，vue-demi可以做到！

关于vue开发中，高德地图有时不显示的问题

zzzzzzzi111的博客

07-30

1220

关于vue开发中，高德地图有时不显示的问题

vue引入腾讯地图demo

Jeremz的博客

08-28

648

<template> <div> <div class="mapfont" style="width: 100%" id="mapcon">  <el-autocomplete

vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)

10-15

秘钥是使用高德地图服务的基础，确保正确配置才能使用地图的各项功能。同时，如果要使用关键字搜索，需要在引入的链接中添加`plugin=AMap.Autocomplete,AMap.PlaceSearch`参数，这样才能加载相应的插件。接着，...

仿微信发送位置、地图选点(高德地图)

12-29

2. **地图初始化**：在Activity或Fragment中，我们需要初始化地图控件，设置地图显示的级别、中心点等参数。这通常通过`MapView`类和`Amap`对象来实现。 3. **定位服务**：高德地图API提供了定位服务，可以获取用户...

Vue+腾讯地图-实现关键词输入提示功能

小破孩的博客

03-05

1187

Vue+腾讯地图-实现关键词输入提示功能

Vue3前端项目加载使用腾讯地图

子时不睡的博客

12-19

5538

vue3前端项目加载腾讯地图

在vue中使用腾讯地图

记录点滴

12-06

5594

最近在做公司后台ERP系统时，用到了腾讯地图，遇到了不少坑，在这里记录下：用到了几个主要知识点先说下： 1、单例的设计思想（在判断是否有map实例那块） 2、对象深度克隆（创建门店那块） 3、this指向问题（有很多，自己看）引入 qqmap 腾讯官方未提供通过npm插件方式来安装腾讯地图，还好有大佬写了一个： https://www.npmjs.com/package...

vue引入腾讯地图报错【'qq' is not defined】

qq_37088317的博客

04-13

8993

今天引入腾讯地图时报错【‘qq’ is not defined】，但我看到我的<template> <div id="container"></div> </template> <script> export default { mounted () { var center = new qq.maps.LatLng(3...

vue2中使用腾讯地图

一直记录

02-10

1439

);// 定义地图中心点坐标 const center = new window . TMap . LatLng(37.464594 , 121.447867);// 定义map变量，调用 TMap.Map() 构造函数创建地图 const map = new window . TMap . Map(document . getElementById('map') , {

vue 使用高德地图AMapUI加载组件失败解决方式

夏夏

12-08

4034

先来描述一下问题：基于展示车辆轨迹的需求，使用了高德地图的PathSimplifier轨迹展示组件，在PC端使用没有问题，但是切换到手机端就会有问题，加载不到PathSimplifier。分析原因： 1.AMapUI是否加载到，测试没有问题 2.考虑到我们办公环境受网络限制，于是在真机上测试，也是加载不到 3.可能手机端和PC端的浏览器版本问题，但是在同一个浏览器下也是不行解决：尝试了很多方式，准备另辟蹊径时，做了最后的挣扎，再仔细查看官方文档，目的是看看加载组件是有没有特殊要求，于是

【高德地图-JS】Vue2加载高德地图API报错Invalid Object: LngLat(NaN, NaN)

m0_58960403的博客

11-22

924

地图的容器盒子的宽高的问题。

记录在Vue项目里面使用腾讯地图