Vue 腾讯地图异步加载

最新推荐文章于 2024-08-28 22:12:45 发布

P2YH

最新推荐文章于 2024-08-28 22:12:45 发布

阅读量1.7k

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/P2H1314/article/details/114999102

版权

为了解决腾讯地图js文件加载慢导致的用户体验问题，本文提出了在Vue应用中使用异步加载地图的方法，实现地图模块的懒加载，从而提高页面加载速度。

摘要由CSDN通过智能技术生成

需求

腾讯地图js文件加载太慢，有时长达数十秒，传统的在index.html中引入的方式，会导致所有页面都等待js加载。体验极差。

解决

使用异步加载，在需要地图的模块进行懒加载。

核心代码如下：

  mounted() {
   
  //异步加载
	const mapScript = document.createElement('script')
    mapScript.type = 'text/javascript'
    mapScript.src = 'https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'
    document.body.appendChild(mapScript)
    mapScript.onload = () => {
   
      console.log('mapScript 加载完毕')
      //加载完成后初始化地图
      this.initMap()
    }
  },
	methods: {