需求
腾讯地图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: {
initMap() {
//定义地图中心点坐标
var center = new TMap.LatLng(39.984120, 116.307484)
//定义map变量，调用 TMap.Map() 构造函数创建地图
var map = new TMap.Map('chartMap', {
center: center,//设置地图中心点坐标
zoom: 3.5, //设置地图缩放级别
});
}
},
完整可测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>腾讯地图异步加载</title>
<script src="//unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="chartMap">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'W3xue'
},
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: {
initMap() {
//定义地图中心点坐标
var center = new TMap.LatLng(39.984120, 116.307484)
//定义map变量，调用 TMap.Map() 构造函数创建地图
var map = new TMap.Map('chartMap', {
center: center,//设置地图中心点坐标
zoom: 3.5, //设置地图缩放级别
});
}
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
</body>
</html>
