网址(中文):https://dafrok.github.io/vue-baidu-map/#/zh/index
安装
npm install vue-baidu-map --save
或者
yarn add vue-baidu-map
引入
// 百度地图
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: '申请的百度ak'
})
使用
<template>
<div>
<baidu-map class="map" :center="{ lng: 116.404, lat: 39.915 }" :zoom="15">
<!-- “BMAP_ANIMATION_NONE”,无动画效果、“BMAP_ANIMATION_DROP”,点标掉落果、“BMAP_ANIMATION_BOUNCE”,点标弹跳效果 -->
<bm-marker
:position="{ lng: 116.404, lat: 39.915 }"
:dragging="true"
animation="BMAP_ANIMATION_BOUNCE"
>
<!-- labelStyle文本样式 -->
<!-- offset标注的位置偏移值 -->
<bm-label
content="哭唧唧"
:labelStyle="{ color: 'red', fontSize: '16px' }"
:offset="{ width: -20, height: 30 }"
/>
</bm-marker>
</baidu-map>
</div>
</template>
<script>
export default {};
</script>
<style>
.map {
width: 100%;
height: 400px;
}
.BMap_cpyCtrl{
display: none;
}
.anchorBL{
display: none;
}
</style>
效果图
![](https://i-blog.csdnimg.cn/blog_migrate/75f6346797a1eb7a138efc308f3c7aa7.png)