Vue baidu map 入门

vue-baidu-map 是百度地图的一个 Vue 插件，使用 vue-baidu-map ，本文将简单介绍 vue-baidu-map 的用法。并用一个真实案例来实现百度地图地址定位标点、关键字搜索定位，并根据点击坐标获取目标的经纬度及地址数据。

申请的密钥

在百度地图开发者平台申请的密钥，此密钥即使后面开发要用到的ak的值。

安装

npm install vue-baidu-map --save

注册

1. 全局注册

在 main.js 文件中引入以下代码：

import vuefrom 'vue'
import BaiduMap from 'vue-baidu-map'
vue.use(BaiduMap, {
  ak: 'YOUR_APP_KEY'
})

2. 局部注册

需要把百度地图的秘钥写在 标签上。

<template>
  <baidu-map class="bm-view" ak="YOUR_APP_KEY">
  </baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  components: {
    BaiduMap
  }
}
</script>

• 引入组件

import BaiduMap from "vue-baidu-map/components/map/Map";
import BmGeolocation from "vue-baidu-map/components/controls/Geolocation";
import BmLocalSearch from "vue-baidu-map/components/search/LocalSearch";
import BmMarker from "vue-baidu-map/components/overlays/Marker";

• 添加组件

components: { BaiduMap, BmGeolocation, BmLocalSearch, BmMarker },

3. CDN 全局注册

<script>
Vue.use(VueBaiduMap.default, {
  ak: 'YOUR_APP_KEY'
})
</script>

实现地址定位

添加定位控件，对一个地图实例进行地区检索：

<bm-geolocation
  anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
  :show-address-bar="true"
  :auto-location="true"
/>

对一个地图实例进行地区检索：

• 模板

<el-autocomplete
  v-model="query.title"
  :fetch-suggestions="querySearch"
  style="width: 100%"
  :trigger-on-focus="false"
  size="small"
  @select="handleSelect"
/>
<bm-local-search
  :keyword="query.title"
  :auto-viewport="true"
  :panel="false"
/>

这里添加了Element UI 的 el-autocomplete组件，方便输入关键字可以自动完成。

• script

querySearch(queryString, cb) {
  const options = {
    onSearchComplete(results) {
      if (local.getStatus() === 0) {
        // 判断状态是否正确
        const s = [];
        for (let i = 0; i < results.getCurrentNumPois(); i++) {
          const x = results.getPoi(i);
          const item = { value: x.title, point: x.point };
          s.push(item);
          cb(s);
        }
      } else {
        cb();
      }
    },
  };
  const local = new this.BMap.LocalSearch(this.map, options);
  local.search(queryString);
}

handleSelect(item) {
  const { point } = item;
  const position = {
    address: item.value,
    title: this.query.title,
  };
  this.updateEvent(point, position);
  this.makerCenter(point);
},
makerCenter(point) {
  if (this.map) {
    this.map.clearOverlays();
    this.map.addOverlay(new this.BMap.Marker(point));
  }
},

querySearch 为自动完成时调用的回调函数。判断状态是否正确时，会将所有满足条件的返回结构作为自动完成的选项。点击一个选项时，会定位标点并跳跃。

地址定位标点

添加标记，在地图中心添加可拖动的跳跃点标记：

• 模板

  <bm-marker
  :position="mapCenter"
  :dragging="true"
  animation="BMAP_ANIMATION_BOUNCE"
  />

• script

  makerCenter(point) {
  if (this.map) {
    this.map.clearOverlays();
    this.map.addOverlay(new this.BMap.Marker(point));
  }
  },

先清除在添加会生成的点标记好像跳跃。

获取地址数据并获取经纬度

 onClick(e) {
  this.mapCenter = e.point;
  if (this.BMap) {
    const geo = new this.BMap.Geocoder();
    geo.getLocation(this.mapCenter, ({ surroundingPois }) => {
      if (surroundingPois.length > 0) {
        const position = surroundingPois[0];
        this.updateEvent(this.mapCenter, position);
      }
    });
  }
},
updateEvent(point, position) {
  this.query.lng = point.lng;
  this.query.lat = point.lat;
  this.query.address = position.address;
  this.query.title = position.title;
},

这是一个反方功能。在百度地图容器上点击触发 click事件，将点击坐标作为中心点进行推算，通过 surroundingPois 准确定位，最终获取到目标位置的经纬度及地址数据。

添加样式

.map-item {
  width: 100%;
  height: 400px;
}
.bm-view {
  margin-top: 8px;
  width: 100%;
  height: 100%;
}

注意，BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。

参考示例

• Vue Baidu Map文档
• 访问 codesandbox 查看项目代码