uniapp h5 调用腾讯地图TMap

第一种:在App.vue文件的onLauch里加入(全局引用)

onLaunch: function() {
	/*动态引入script 腾讯地图*/
	//上一篇的TMap引入用此方法即可
    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)
  }
},

你可能感兴趣的:(uni-app,前端,html5)