vue2.0引入腾讯地图

时间:2023-02-27 11:47:38

百度很多东西,然后我没找到腾讯地图在VUE2.0里面的引用。于是根据找的其他地图引用资料进行尝试。步骤如下。

首先在src里面建立了TMap.js的文件,内容如下:

  export function TMap(key) {
return new Promise(function (resolve, reject) {
window.init = function () {
resolve(qq)//注意这里
}
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://map.qq.com/api/js?v=2.exp&callback=init&key="+key;
script.onerror = reject;
document.head.appendChild(script);
})
}

然后,直接使用部分代码,我在map.vue里面使用代码如下:

<template>
<div id="container">
</div>
</template>
<script>
import { TMap } from '../TMap'
export default {
data() {
return {
}
},
mounted() {
TMap('申请的key').then(qq => {
var map = new qq.maps.Map(document.getElementById("container"), {
// 地图的中心地理坐标。
center: new qq.maps.LatLng(39.916527, 116.397128),
zoom: 8
});
});
},
methods: {
},
created: function () {
}
}
</script>
<style>
#container {
min-width:600px;
min-height:767px;
}
</style>

最后,出效果了如下:

vue2.0引入腾讯地图