1. 效果
2. 使用
2.1 npm 安装
npm install vue-baidu-map --save
2.2 ak申请
是在百度地图开发者平台申请的密钥 详见 百度地图开发者平台ak申请
2.3 main.js 引入
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'xxxxxxxxxxxxxxxx'
})
3. demo案例
<template>
<div class="content">
<baidu-map class="bm-view" :scroll-wheel-zoom="true" :center="location" :zoom="zoom"></baidu-map>
</div>
</template>
<script>
export default {
data() {
//这里存放数据
return {
// 设置中心点 经度纬度
location: {
lng: 121.4095,
lat: 31.1796
},
// 中心点缩放大小
zoom: 10,
};
},
};
</script>
<style lang='scss' scoped>
.content {
width: 100%;
height: 100vh;
.bm-view {
width: 100%;
height: 100vh;
}
}
</style>
注意:需要设置高度100vh,否则地图会显示不出来