Vue实现百度地图
1、安装：
|
1
|
$ npm install vue-baidu-map --save |
2、全局注册，在main.js中引入以下代码
|
1
2
3
4
|
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, { ak: '你申请的key'
}) |
3、界面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<template> <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:1080px" @click="getClickInfo" :scroll-wheel-zoom='true'>
</baidu-map>
</template><script>export default {
name: 'TestBaiDu',
data () {
return {
center: {lng: 109.45744048529967, lat: 36.49771311230842},
zoom: 13
}
},
methods: {
handler ({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)
},
getClickInfo (e) {
console.log(e.point.lng)
console.log(e.point.lat)
this.center.lng = e.point.lng
this.center.lat = e.point.lat
}
}} |
|
1
|
</script> |
在页面中就是普通的地图