Vue利用Vue Baidu Map，导入百度地图，完成关键词搜索，覆盖物编辑。

当前可以在各类软件应用到百度地图，腾讯地图，今天以百度地图举例，如何在自己的项目添加百度地图

Vue Baidu Map网址：Vue Baidu Map

1.导入第三方包：

$ npm install vue-baidu-map --save

2.注册组件（全局注册和局部注册，这里是全局注册，可自行翻阅Vue Baidu Map官网查阅）

// 全局导入百度地图
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, { ak: '进入百度地图开放平台注册账号获取ak' })

3.给地图组件设置足够大的宽高显示地图

//百度地图组件
<baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
//....放置功能组件
</baidu-map>

//方法
export default {
  data () {
    return {
      center: {lng: 0, lat: 0},//初始地图定位位置的经纬度
      zoom: 3//地图缩放等级
    }
  },
  methods: {
    //地图渲染完毕时触发回调函数，参数1：
    handler ({BMap, map}) {
//BMap：BMap 是百度地图的API对象，它提供了许多用于操作地图的方法和属性。
//map:是当前地图实例的引用，你可以使用它来进一步操作地图，比如添加标记点、添加控件、改变地图样式等等。
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
}
//样式
.map {
  width: 1000px;
  height: 600px;
}

添加地图覆盖物

      <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
        <!-- 覆盖物 -->
        <bm-polygon
          fill-color="#eec8cc"
          stroke-style="dashed"
          :path="polygonPath"
          stroke-color="#ea9d9e"
          :stroke-opacity="0.5"
          :stroke-weight="1"
          :editing="isShow"
          @lineupdate="updatePolygonPath"
        />
      </baidu-map>
//:editing是否启用线编辑控制地图覆盖物是否可以编辑

 

 检索功能

      <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
        <!-- 检索功能 -->
        <bm-local-search :keyword="keyword" :auto-viewport="true" />
      </baidu-map>
    //准备一个输入框获取输入框内容keyword做关联
      <div style="margin: 20px 10px">
        地区关键词:<el-input
          v-model="keyword"
          style="width: 250px; margin-left: 5px"
          placeholder="请输入地区关键词"
        />
      </div>

定位控件

     <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
        <!-- 定位控件：在地图右下角加入定位控件 -->
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :show-address-bar="true" :auto-location="true" />
      </baidu-map>

控件放置位置：anchor属性值：

上左(BMAP_ANCHOR_TOP_LEFT),

上右(BMAP_ANCHOR_TOP_RIGHT),

下左(BMAP_ANCHOR_BOTTOM_LEFT),

下右(BMAP_ANCHOR_BOTTOM_RIGHT),

我们需要结合百度API文档：百度地图JSAPI 3.0类参考和Vue Baidu Map去查阅编写