1，前言
記錄一下Vue2項目中，百度地圖API的簡單使用。
2，申請賬號，獲取key
需要先申請百度賬號，然后登陸百度地圖開放平臺：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey，按照流程，申請成為開發(fā)者，然后創(chuàng)建應(yīng)用。
申請
應(yīng)用類型選擇瀏覽器端，Referer白名單填*
創(chuàng)建項目
3，安裝依賴
npm i --save vue-baidu-map
4，全局引入用法
先在main.js中引入
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, { ak: '你申請的key' })
然后在你的.vue文件中
<template>
<div id="index">
<baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" />
</div>
</template>
<script>
export default {
name: 'Index',
components: {},
data() {
return {
center: { lng: 0, lat: 0 },
zoom: 0
}
},
created() {},
mounted() {},
methods: {
handler({ BMap, map }) {
console.log(BMap, map)
this.center.lng = 121.487899486
this.center.lat = 31.24916171
this.zoom = 15
}
}
}
</script>
<style lang="less" scoped>
.map{
width: 500px;
height: 500px;
}
</style>
沒問題的話現(xiàn)在已經(jīng)可以在頁面上看到上海市了
5，局部引入用法
在你的.vue文件中
<template>
<div id="index">
<baidu-map class="map" :ak="ak" :center="center" :zoom="zoom" @ready="handler" />
</div>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
name: 'Index',
components: {
BaiduMap
},
data() {
return {
ak: '你的key',
center: { lng: 0, lat: 0 },
zoom: 0
}
},
created() {},
mounted() {},
methods: {
handler({ BMap, map }) {
console.log(BMap, map)
this.center.lng = 121.487899486
this.center.lat = 31.24916171
this.zoom = 15
}
}
}
</script>
<style lang="less" scoped>
.map{
width: 500px;
height: 500px;
}
</style>
6，常用參數(shù)說明&文檔
屬性
| 屬性名 | 類型 | 默認(rèn)值 | 描述 |
|---|---|---|---|
| ak | String | 無 | 百度地圖開發(fā)者平臺申請的密鑰，僅在局部注冊組件時聲明 |
| center | Point, String | 無 | 定位, 可使用如"廣州市海珠區(qū)"的地區(qū)字符串，也可以使用對象如 {lng: 116.404, lat: 39.915} 表示經(jīng)緯度 |
| zoom | Number | 無 | 縮放等級 |
| min-zoom | Number | 無 | 最小縮放級別 |
| max-zoom | Number | 無 | 最大縮放級別 |
| map-click | Boolean | true | 允許點擊 該項僅在地圖組件掛載時加載一次 |
| dragging | Boolean | true | 允許拖拽 |
| scroll-wheel-zoom | Boolean | true | 允許鼠標(biāo)滾輪縮放 |
事件
| 事件名 | 參數(shù) | 描述 |
|---|---|---|
| click | {type, target, point, pixel, overlay} | 左鍵單擊地圖時觸發(fā)此事件。 當(dāng)雙擊時，產(chǎn)生的事件序列為： click click dblclick |
| dblclick | {type, target, pixel, point} | 鼠標(biāo)雙擊地圖時會觸發(fā)此事件 |
| dragstart | {type, target, pixel, point} | 開始拖拽地圖時觸發(fā) |
| dragging | {type, target, pixel, point} | 拖拽地圖過程中觸發(fā) |
| dragend | {type, target, pixel, point} | 停止拖拽地圖時觸發(fā) |
| resize | {type, target, size} | 地圖可視區(qū)域大小發(fā)生變化時會觸發(fā)此事件 |
| hotspotclick | {type, target, spots} | 點擊熱區(qū)時觸發(fā)此事件 |
| hotspotover | {type, target, spots} | 鼠標(biāo)移至熱區(qū)時觸發(fā)此事件 |
| hotspotout | {type, target, spots} | 鼠標(biāo)移出熱區(qū)時觸發(fā)此事件 |
| tilesloaded | {type, target} | 當(dāng)?shù)貓D所有圖塊完成加載時觸發(fā)此事件 |
官方文檔：https://dafrok.github.io/vue-baidu-map/#/zh/index
如果看了覺得有幫助的，我是@鵬多多11997110103，歡迎 點贊 關(guān)注 評論；
END
往期文章
個人主頁
