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

已于 2023-01-04 10:31:46 修改
阅读量9.3k 收藏 10
点赞数 3
文章标签： vue
于 2021-07-12 16:54:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kukulei2211/article/details/118678200
版权

根据腾讯地图官方文档引入
在这里插入图片描述
直接在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这个问题，之前都是在浏览器控制台打印的’TMap’ is not defined，按其他文档改完后，现在成了在终端显示了，就很烦。。。
在这里插入图片描述

在vue.config.js里加上

module.exports = {
    lintOnSave: false  //加入此行 , false为关闭true为开启
}

重启vue项目后，控制台的里问题都没了，地图也可以了
在这里插入图片描述

难瘦丶
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
腾讯地图定位2个demo（1.一个标记点，地图可点击。2.多个标记点，标记点可以点击并显示信息）
11-12
腾讯地图定位2个demo（1.一个标记点，地图可点击。2.多个标记点，标记点可以点击并显示信息）。替换自己的key可以正常运行
vue 引入腾讯地图找不到TMap
ZillahV06的博客
05-12 709
注意：在2D模式下，地图不能旋转，需要3D模式下才可以。后经查询需要加从window中查找。
vue3+Ts+Ant Design Vue +天地图组件封装
最新发布
唯见青山不见君
04-09 2226
这是一个基于Ant Design Vue组件封装的天地图组件,主要功能是实现一个带有地图选择点位,搜索打点功能的基本模态框
uniapp H5引入腾讯地图，报错TMap is not defined...解决办法
qq_35271388的博客
06-16 2055
uniapp H5引入腾讯地图，报错TMap is not defined...解决办法
vue引入腾讯地图报错【'qq' is not defined】
qq_37088317的博客
04-13 8059
今天引入腾讯地图时报错【‘qq’ is not defined】，但我看到我的<template> <div id="container"></div> </template> <script> export default { mounted () { var center = new qq.maps.LatLng(3...
腾讯地图实现站点标记，及已标记的点回显在地图上
yolo_link的博客
10-10 2266
腾讯地图实现点标记及回显操作。使用过程中可能会遇到："ReferenceError: TMap is not defined"，"ReferenceError: TMap is not defined"，地图不会重绘，容器内出现多个地图实例等问题，相关的解决方案文中都有对应的解释。
tmap的使用_使用tmap在形状上弹出
weixin_39915078的博客
01-14 164
I have made a map unsing tmap to include in a shiny app using leaflet. I have roughly what I want: a thematic map with fill color based on a SpatialPolygonsDataFrame, and when you click the map, a pop...
报错 Vue is not defined 的解决方法
qq_63708263的博客
05-30 9697
3.下载问题，检查以下下载的是哪种版本，vue2和vue3的版本使用方式不同。2.vue在代码创建时，vue需要写成Vue的情况，第一个字母需要大写。1.vue.global.js 文件没有引入，或者路径不对。
Professional Node.js Building Javascript Based Scalable Software epub
10-06
Professional Node.js Building Javascript Based Scalable Software 英文epub 本资源转载自网络，如有侵权，请联系上传者或csdn删除 本资源转载自网络，如有侵权，请联系上传者或csdn删除
解决vue项目报错webpackJsonp is not defined问题
10-18
下面小编就为大家分享一篇解决vue项目报错webpackJsonp is not defined问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中提示$index is not defined错误的解决方式
11-19
今天学习Vue中遇到了一个报错信息：$index is not defined，是我写了个for循环在HTML中，然后是因为版本的问题 下面是解决方法： 原来的是 v-for=”person in items” v-on:click=”deletePerson($index)”//这个...
在vue中使用腾讯地图
简廉的博客
02-09 2513
1. 引入腾讯地图 在 index.html 中插入 <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=你申请的key"></script> 2. 引入TMap 在 build/webpack.base.conf.js 中 引入 TMap，否则在使用时会报错 externals: { TMap: 'TMap' } 3. 创建地图组件 3.1.为地图创建容器 <temp
解决BMap is not defined？
gang456789的博客
09-21 3万+
除了上篇文章在配置文件中修改之外，还有其他方法， 先重复第一种 module.exports = { entry: './src/main.js', externals:{ 'BMap':'BMap' }, ... } 然后在目标vue文件中调用 import BMap from 'BMap'后来我有朋友介绍了一个挺实用的方法，跟百度api官网里的异步
Vue is not defined错误的几种可能
热门推荐
weixin_54508954的博客
09-09 4万+
Vue is not defined错误的几种可能
腾讯地图vue
wenfu814的博客
11-18 460
最近在使用腾讯地图api（以下以位置数据可视化API为例），在初建项目之后，按照官网的说法，直接引入 再将官网的初始化例子放一个方法 在mounted中调用即可看到腾讯地图，但是我引入之后，一直报TMap undefined，在网上搜到一种npm引入地图的方式，但是那个库太老了，没有GL的，别的就没搜到什么有用的东西了（也可能是因为我搜的说法不对），后来一位大佬指点，在控制台console一下window，发现TMap在window里，所以官网上说用TMap的，我都得用window.TMap。后来发现这种外
[已解决]Vue中控制台提示XXX is not definded错误解决方法
qq_43055855的博客
10-14 9752
项目场景： 今天在听老师讲Vue项目的时候出现报的错误。 问题描述： 项目一致出现XXX is not defined 。 data() { var validatePass = (rule, value, callback) => { var oldPw = /^[a-zA-Z0-9]{3,15}$/; if (value == "") { callback(new Error("请输入密码")); } else {
vue项目使用高德地图时报错：AMap is not defined
文龙刚的博客
12-06 4847
vue项目使用高德地图时报错：AMap is not defined
【vue】报错：mapState is not defined
gz-郭小敏的博客
04-16 1万+
场景： vue-cli项目引入了vuex，在vue component模块中调用以下代码报错。 export default { computed:{ ...mapState({ isLogin: state => state.isLogin, userName:state => state.userName, }), } } 错误： App.vue...
vue3调用天地图报TMap is not defined
05-10
这种错误通常是因为没有正确引入天地图的 API 库。请确保你在项目中正确引入了天地图的 API 库，并且在代码中使用了正确的命名空间。以下是一个使用 Vue3 和天地图 API 的示例代码： 1. 在 index.html 中引入天地图的 API 库，比如： ``` <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=yourkey"></script> ``` 其中 `yourkey` 是你在天地图申请的 API Key。 2. 在组件中使用天地图 API，比如： ``` <template> <div id="map"></div> </template> <script> export default { mounted() { const map = new T.Map("map"); // 使用 T 命名空间创建地图实例 map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 14); // 设置地图中心和缩放级别 }, }; </script> ``` 在这个示例中，我们使用 `T` 命名空间来创建地图实例和其它地图相关对象。请确保在代码中正确使用命名空间，否则会报 `TMap is not defined` 的错误。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值