UniApp调用腾讯地图TMap

方法有二种：

第一种：在要目录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)
  }
},

结束语

window.TMap的判断是非常重要的。很多人不做判断直接用。造成问题找来找去，找出出问题。

相关其它TMap接口，查看对应官网

示例效果