UniApp调用腾讯地图TMap

原创已于 2022-10-22 19:43:00 修改 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vue.js #javascript

于 2022-10-22 19:41:12 首次发布

uni-app 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了在Vue应用中通过两种方式动态引入腾讯地图API并确保TMap可用性，包括在App.vue的onLaunch和组件mounted阶段的实现，以及关键的window.TMap判断。

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

方法有二种：

第一种：在要目录App.vue文件的onLauch里加入

onLaunch: function() {

/*动态引入script 腾讯地图*/

const script = document.createElement('script') script.src = 'https://map.qq.com/api/gljs?v=1.exp&key=你的key&libraries=tools'

document.body.appendChild(script)

}

第二种：在要目录*****.vue文件的mounted里加入

mounted() {
  try {
    if (window.TMap) {
      //todo 如果能访问到TMap直接初始化
      this.initMap()
    } else {
      //todo 动态引入
      const script = document.createElement('script');
      script.src = "https://map.qq.com/api/gljs?v=1.exp&key=你的key&libraries=tools";
      script.onload = () => {
        //todo 初始化地图
        this.initMap();
      }
      document.body.appendChild(script);
    }
  } catch (e) {
    console.log('mounted 时出错', e)
  }

}

初始化地图

//初始化地图
async initMap() {

  let latitude= ...
  let longitude=...

  try { //定义map变量，调用 TMap.Map() 构造函数创建地图

    const _this = this
    let map = _this.map
    if (map) {
      map.setMap(null)
      map = null
    }

    let center = new TMap.LatLng(latitude, longitude)

    this.map = await new TMap.Map(
        document.getElementById('container'),
        {
          center: center, //设置地图中心点坐标
          zoom: 12 //设置地图缩放级别
        }
    )

  } catch (e) {
    console.log('初始化地图时出错 出错', e)
  }
},