1.不知道为什么
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
这种方式引入js无效,不加载js文件。,于是改成官方的第二种引入方式。
2.在官方的例子上再改下代码,等js加载完成后再去初始化地图,不然会报TMap不存在。
<template >
<div id="container"></div>
</template>
<style scoped>
#container{
/*地图(容器)显示大小*/
width:1200px;
height:400px;
}
</style>
<script>
export default {
name: 'tencentmap',
data () {
return {
}
},
methods: {
initMap() {
//定义地图中心点坐标
var center = new TMap.LatLng(39.984120, 116.307484)
//定义map变量,调用 TMap.Map() 构造函数创建地图
var map = new TMap.Map(document.getElementById('container'), {
center: center,//设置地图中心点坐标
zoom: 17.2, //设置地图缩放级别
pitch: 43.5, //设置俯仰角
rotation: 45 //设置地图旋转角度
});
},
loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&callback=init";
script.onload = script.onreadystatechange = () => {
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) {
this.initMap();
script.onload = script.onreadystatechange = null;
}
};
document.body.appendChild(script);
}
},
mounted() {
this.loadScript();
}
}
</script>