Vue中使用百度地图Vue Baidu Map(vue-baidu-map)

最近负责的一个vue项目中需要调用百度地图api做标记打点的需求，记录一下：

vue-baidu-map 官方地址 

一.插件的安装

1.npm 安装

$ npm install vue-baidu-map --save

2.js 引入

index.html 中 

二.使用

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'
})

2.局部注册(按需引入组件)

局部注册的 BaiduMap 组件必须声明 ak 属性。 所有的独立组件均存放在 vue-baidu-map/components 文件夹下，按需引用即可。 由于未编译的 ES 模块不能在大多数浏览器中直接运行，如果引入组件时发生运行时错误，请检查 webpack 的 loader 配置，确认 include 和 exclude 选项命中了组件库。

3.CND全局注册

 

我项目中所需功能比较简单，所以我选择了第二种方法局部引入了以下几种组件：

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'; //标注弹窗

 

 

实现的代码如下：

 

其中获取点坐标的信息是废了一点时间，因为只拿到经纬度，想要获取具体街道信息就需要使用

let geocoder= new BMap.Geocoder(); //创建地址解析器的实例

geocoder.getLocation(val.point,rs=>{

console.log(val.address)

})