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>
|
在頁面中就是普通的地圖
