最近负责的一个vue项目中需要调用百度地图api做标记打点的需求，记录一下：
vue-baidu-map 官方地址
一.插件的安装
1.npm 安装
$ npm install vue-baidu-map --save
2.js 引入
index.html 中
<script src="https://unpkg.com/vue-baidu-map"></script>
二.使用
1.全局注册(一次性引入百度地图组件的所有组件)
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'YOUR_APP_KEY'
})
<template>
<baidu-map class="bm-view">
</baidu-map>
</template>
<style>
.bm-view {
width: 100%;
height: 300px;
}
</style>
2.局部注册(按需引入组件)
局部注册的 BaiduMap 组件必须声明 ak 属性。 所有的独立组件均存放在 vue-baidu-map/components 文件夹下，按需引用即可。 由于未编译的 ES 模块不能在大多数浏览器中直接运行，如果引入组件时发生运行时错误，请检查 webpack 的 loader 配置，确认 include 和 exclude 选项命中了组件库。
3.CND全局注册
<script>
Vue.use(VueBaiduMap.default, {
ak: 'YOUR_APP_KEY'
})
</script>
我项目中所需功能比较简单，所以我选择了第二种方法局部引入了以下几种组件：
mport BaiduMap from 'vue-baidu-map/components/map/Map.vue';
import BmView from 'vue-baidu-map/components/map/MapView'; //地图视图
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch'; //搜索
import BmMarker from 'vue-baidu-map/components/overlays/Marker'; //点标注
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'; //标注弹窗
实现的代码如下：
<template>
<div>
<div class="mb-10">
<label>地区：<input v-model="location"></label>
<label> 关键词：<input v-model="keyword"></label>
<label> 经度：<input v-model="markerPo.lat"></label>
<label> 纬度：<input v-model="markerPo.lng"></label>
</div>
<baidu-map ak="ocjtpCpd3HusX9VUmkfc49P9jxRV5Vch" :scroll-wheel-zoom="true" @rightclick="clickBmap">
<!--地图视图-->
<bm-view class="map" ></bm-view>
<!--显示更多-->
<div class="more_panel">
<span :class="{'down':isShowPanel}" @click.stop="showPanel">
<span>{{isShowPanel?'隐藏':'显示'}}</span>搜索列表<i class="el-icon-d-arrow-right"></i>
</span>
</div>
<!--搜索-->
<bm-local-search :keyword="keyword" :panel="isShowPanel" :auto-viewport="true" :location="location" @searchcomplete="searchcomplete"></bm-local-search>
<!--点标注-->
<bm-marker :position="markerPo" :dragging="true" :title="storeName" :zIndex="999999999" @click="infoWindowOpen" :icon="{url:markerIcon,size: {width: 34, height: 34}}" @dragend="dragend">
<bm-info-window :show="isShowInfo" @close="infoWindowClose" @open="infoWindowOpen">{{address}}</bm-info-window>
</bm-marker>
</baidu-map>
</div>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
import BmView from 'vue-baidu-map/components/map/MapView'; //地图视图
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch'; //搜索
import BmMarker from 'vue-baidu-map/components/overlays/Marker'; //点标注
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'; //标注弹窗
export default {
components:{
BaiduMap,
BmView,
BmLocalSearch,
BmMarker,
BmInfoWindow
},
data() {
return {
storeName:'',
center: { //经纬度
lng: 39.9, lat: 116.3
},
zoom: 3, //地图展示级别
location: '北京',
keyword: '北京',
markerPo:{
lng: 39.9, lat: 116.3
},
isShowPanel: true,
isShowInfo:false,
markerIcon:'', //标注图片
address:''
};
},
methods: {
clickBmap(val){ //右击鼠标放标注
this.markerPo = val.point;
},
showPanel(){ //点击标注出现弹框
this.isShowPanel = !this.isShowPanel;
},
infoWindowClose () { //弹框关闭
this.isShowInfo = false
},
infoWindowOpen () { //弹框打开
this.isShowInfo = true
},
dragend(val){ //标注拖拽完成获取坐标信息
this.markerPo = val.point;
let geocoder= new BMap.Geocoder(); //创建地址解析器的实例
geocoder.getLocation(val.point,rs=>{
this.address = rs.address;
})
},
searchcomplete(arr){
this.isShowPanel = true;
}
}
};
</script>
<style lang="scss" scoped>
.map{
width: 100%;
height:500px;
}
.more_panel{
text-align: center;
font-size: 12px;
color: #2878ff;
padding-top:10px;
span{
cursor: pointer;
i{
transform:rotate(90deg);
}
}
span.down{
i{
transform:rotate(-90deg);
}
}
}
</style>
其中获取点坐标的信息是废了一点时间，因为只拿到经纬度，想要获取具体街道信息就需要使用
let geocoder= new BMap.Geocoder(); //创建地址解析器的实例
geocoder.getLocation(val.point,rs=>{
console.log(val.address)
})
