今天研究了一下怎么在vue里引用腾讯地图,腾讯地图只提供了script的引入方式连npm都没有,以下是代码
// 为了方便直接写在APP.vue里面
<template>
<div id="all-map" class="map" ></div>
</template>
<script>
/* eslint-disable no-undef */
export default {
data () {
return {
}
},
methods: {
TencentMap () {
var center = new qq.maps.LatLng(31.755281, 119.945394)
// eslint-disable-next-line no-unused-vars
var map = new qq.maps.Map('all-map', {
center: center, // 地图的中心地理坐标。
zoom: 10// 地地图缩放
})
}
},
mounted () {
this.TencentMap()
}
}
</script>
<style>
.map{
width: 600px;
height: 600px;
}
</style>
然后在index.html里面写入script引入文件就行
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=这里填写你自己的key
"></script>