一. 插件安装
npm i --save vue-baidu-map-v3
vue-baidu-map-v3使用的百度地图 JavaScript API v3.0
二. main.js全局引入
import BaiduMap from 'vue-baidu-map-v3'
Vue.use(BaiduMap, {
ak: '你的ak'
})
三. 基本使用
<template>
<div class="container">
<baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler"></baidu-map>
</div>
</template>
<script>
export default {
data() {
return {
//没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。
//当center 属性为合法地名字符串时例外,因为百度地图会根据地名自动调整 zoom 的值。
center: {
lng: 0, lat: 0},
zoom: 3,
map: null,
BMap: null
}
},
methods: {
//由于百度地图 JS API 只有 JSONP 一种加载方式,因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此,请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码,不要试图在 vue 自身的生命周期中调用 BMap 类,更不要在这些时机修改 model 层。
handler ({
BMap, map}) {
this.map = map
this.BMap = BMap
this.center.lng = 116.404
this.center.lat = 39.915
this.zoom = 15
}
}
}
</script>
<style>
.container {
width: 100%;
height: 100%;
}
.bm-view {