腾讯地图暂时官方没有在npm上放置，但是有个人的两三年前的依赖，所以我选用百度地图来做。
1.安装依赖
sudo cnpm install vue-baidu-map --save
2.main.js里面引入并填写你的百度地图key
// 引入百度地图
import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap, {
/* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
ak: 'kR0jxLjmV4Mwp7My4HY0FSWR'
})
3.你需要的vue页面引入
import BaiduMap from 'vue-baidu-map';
4.html
<template>
<baidu-map :center="center" :zoom="zoom" @ready="baiduMapFun" :scroll-wheel-zoom='true' class="baiduMap">
</baidu-map>
</template>
.baiduMap{
width: 100%;
height: 300px;
padding-top: 30px;
}
5.methods里面
//百度地图
baiduMapFun({BMap, map}) {
var point = new BMap.Point(109.49926175379778, 36.60449676862417)
map.centerAndZoom(point, 13)
var marker = new BMap.Marker(point) // 创建标注
map.addOverlay(marker) // 将标注添加到地图中
var circle = new BMap.Circle(point, 6, {
strokeColor: 'Red',
strokeWeight: 6,
strokeOpacity: 1,
Color: 'Red',
fillColor: '#f03'
})
map.addOverlay(circle)
}
image.png
如果想用动态渲染地图则核心是先把{BMap, map} 这两个东东挂在data然后再使用,要不然报错BMap, map undefind
baiduMapFun({BMap, map}) {
// console.log(BMap)
this.BMap=BMap
this.map=map
},
//绘制地图
drawMap(){
var that=this
let BMap = that.BMap
let map = that.map
//设置中心点为张家口
var centerPoint = new BMap.Point(that.jingdu,that.weidu)
//设置缩放比例
map.centerAndZoom(centerPoint, 11)
....
},
