腾讯地图引入踩坑分享

tmap.js

export default {
  init: function () {
    // 引入gljs1.0
    const mapUrl = 'https://map.qq.com/api/gljs?v=1.exp&key=AAAAA-FBSKN-TDXF6-SYP54-365KS-P2F24&callback=onMapCallback'
    // 腾讯地图key

    // 引入js2.0
    // const mapUrl = 'https://map.qq.com/api/js?v=2.exp&key=BBBBB-KDO3K-26FJN-AYQUN-L5ISV-BUBSM&callback=onMapCallback'
    return new Promise((resolve) => {
      // 地图异步加载回调处理
      window.onMapCallback = function () {
        // 引入gljs1.0
        resolve(window.TMap)
        // 引入js2.0
        // resolve(window.qq.maps)
      }
      let scriptLabel = document.createElement('script')
      scriptLabel.setAttribute('type', 'text/javascript')
      scriptLabel.setAttribute('src', mapUrl)
      document.body.appendChild(scriptLabel)
    })
  }
}

引入gljs1.0或者js2.0是有差别的
对应的对象、方法都有区别,需要对应处理

// 页面引入
import TMap from '@/utils/tmap'
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容