【baidu-map】 vue百度地图插件使用——地址搜索

<bm-local-search :pageCapacity="3" :keyword="address" :auto-viewport="true" :selectFirstResult="true" location="北京"></bm-local-search>

bm-local-search

1. pageCapacity        用于限制 搜索建议 每页的个数
2. keyword                搜索关键字（与搜索框双向绑定）
3. auto-viewport        true 选择的搜索结果在视图显示
4. selectFirstResult   true 开启 默认选择 第一个搜索建议
5. location                 搜索城市限制（如：北京，则限制为搜索北京市内的地址）

实际代码运用参考

<template>
  <div class="app-container">
    <div class="map-index">
      <baidu-map class="map" :ak="ak" :center="center" :zoom="zoom" @ready="handler">

        <!-- 定位标记 -->
        <bm-marker v-for="marker of markers" :icon="{url: mapIcon, size: {width: 52, height: 52}}" :position="{ lng: marker.lng, lat: marker.lat }" @click="lookDetail(marker)">
          <bm-info-window :title="infoWindow.info.name" :position="{ lng: infoWindow.info.lng, lat: infoWindow.info.lat }"
            :show="marker.showFlag" @close="infoWindowClose(marker)" @open="infoWindowOpen(marker)">
          </bm-info-window>
        </bm-marker>

        
        <!-- 搜索 -->
        <bm-local-search :pageCapacity="3" :keyword="address" :auto-viewport="true" :selectFirstResult="true" location="北京"></bm-local-search>
      </baidu-map>

      <!-- 搜索框 -->
      <div class="map-btn">
        <div class="map-search">
          <input type="text" v-model="address" placeholder="请输入北京地名" />
          <el-button icon="el-icon-search" circle></el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { BaiduMap } from 'vue-baidu-map'
import mapIconPath from "../../../assets/images/people1.png"

export default {
  name: 'Worktrajectory',
  dicts: [],
  components: {
    BaiduMap
  },
  data() {
    return {
      BMap: {},
      map: {},
      mapIcon: mapIconPath,
      // 地图
      ak: '你的百度地图密钥',
      center: { lng: 116.40353288113474, lat: 39.92279883697048 },
      zoom: 17,
      markers: [],
      infoWindow: {
        info: {}
      },
      address: "",
    }
  },
  created() {
    this.handler()
  },
  methods: {
    /** 获取地图 */
    handler({ BMap, map }) {
      console.log(BMap, map)
      this.BMap = BMap; 
      this.map = map; 
      this.center.lng = 116.40353288113474
      this.center.lat = 39.92279883697048
      this.zoom = 17
    },

    // 点击点坐标赋值
    lookDetail(marker) {
      marker.showFlag = true;
      this.infoWindow.info = marker;
    },
    // 关闭弹窗
    infoWindowClose(marker) {
      marker.showFlag = false
    },
    // 打开弹窗
    infoWindowOpen(marker) {
      marker.showFlag = true
    },

  },

}
</script>
<style lang="scss" scoped>

.map-index {
  width: 100%;
  height: 420px;
  margin-bottom: 10px;
  z-index: 9;
  position: relative;

  .map {
    width: 100%;
    height: 420px;
  }

  .map-btn {
    width: 340px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    right: 10px;
    bottom: 10px;

    .map-search {
      width: 200px;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      border-radius: 18px;
      border: 1px solid #e4e7ec;
      overflow: hidden;
      margin-right: 10px;

      input {
        width: 162px;
        height: 36px;
        padding-left: 15px;
        box-sizing: border-box;
        outline: none;
        border: none;
      }
    }
  }
}
</style>

效果图