在vue中使用vuebaidumap实现地址定位标点及关键字搜索定位（获取地址数据并获取经纬度）

vue-baidu-map官方访问站点：https://dafrok.github.io/vue-baidu-map/#/

1.实现效果

关键字搜索或点击地图标点 获取地址数据及经纬度

2.vue-baidu-map的安装和使用

2.1.vue-baidu-map安装

npm install vue-baidu-map --save

2.2.vue-baidu-map的全局注册

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

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.3.vue-baidu-map的局部注册

需要把百度地图的秘钥写在<baidu-map>标签上

                  <template>
                    <baidu-map
                      class="bm-view"
                      scroll-wheel-zoom
                      :center="location"
                      :zoom="zoom"
                      ak="在百度地图开发者平台申请的秘钥"
                      @ready="mapReady"
                    >
                      <bm-view class="map" style=" 100%; height:100%; flex: 1"></bm-view>

                    </baidu-map>
                  </template>

2.4.局部注册vue-baidu-map的使用

2.4.1.引入需要使用的组件

import BaiduMap from 'vue-baidu-map/components/map/Map.vue'; //百度地图接入
import BmView from 'vue-baidu-map/components/map/MapView.vue'
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue'


import BmNavigation from "vue-baidu-map/components/controls/Navigation";
import BmMarkerClusterer from "vue-baidu-map/components/extra/MarkerClusterer";
import BmMarker from "vue-baidu-map/components/overlays/Marker";

import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow"; //标注弹窗
import BmAutoComplete from "vue-baidu-map/components/others/AutoComplete";
import BmControl from "vue-baidu-map/components/controls/Control";

2.4.2.把引入的组件添加到组件components中

 2.4.3.在页面中使用各组件

<bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" />

<bm-control :offset="{ '50px', height: '10px'}">
    <!-- 自动填充 -->
    <bm-auto-complete :sugStyle="{zIndex: 999999}">
       <el-input v-model="inputValue" placeholder="输入关键字进行模糊查询" @change="confirmAddress"></el-input>
    </bm-auto-complete>
</bm-control>

<bm-view class="map" style=" 100%; height:100%; flex: 1"></bm-view>

3.代码展示

3.1.html代码

                  <template>
                    <baidu-map
                      class="bm-view"
                      scroll-wheel-zoom
                      :center="location"
                      :zoom="zoom"
                      ak="bnuIIYxx2iIfYSQtGh3jvA6W0viNQ3GG"
                      @ready="mapReady"
                    >
                      <bm-view class="map" style=" 100%; height:100%; flex: 1"></bm-view>


                      <!-- 自定义控件 -->
                      <bm-control :offset="{ '50px', height: '10px'}">
                        <!-- 自动填充 -->
                        <bm-auto-complete :sugStyle="{zIndex: 999999}">
                          <el-input v-model="inputValue" placeholder="输入关键字进行模糊查询" @change="confirmAddress"></el-input>
                        </bm-auto-complete>
                      </bm-control>

                      <!-- 手动放大缩小到省市街道 位置：右下方-->
                      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" />

                    </baidu-map>
                  </template>

3.2.css代码

          .address_wrap{
            width: 100%;
            height: 100%;
            ::v-deep{
              .bm-view {
                display: block;
                width: 100%;
                height: 100%;
                // border: 1px solid red;
                .BMap_noprint.anchorTL{
                  width: 22%;
                  top: 10px !important;
                  left: 10px !important;
                }
              }
            }
          }

3.3.js代码

let geocoder; 需要把这句放到引入包的下面

data() {
  return {

      // 百度地图参数
      model: {},
      BMap: {},
      map: {},
      location: {
        lng: 113.93588,
        lat: 22.74894
      },
      zoom: 14,
      inputValue: "",
      keyword: ''

  }
},

    // 搜索框的搜索事件
    confirmAddress(e) {
      // console.log("this.model.address:",this.model.address)
      if (this.inputValue != ''){
        // console.log("搜索字段为:" + this.inputValue)
        this.keyword = this.inputValue
      }

      //为啥使用延时？？
      //因为上面搜索框是change事件，变化的太快了看起来效果不好所以添加了延时
      setTimeout(()=>{
      //搜索时把需要标点的地址传入local.search中
        var local = new BMap.LocalSearch(this.map, {
          renderOptions:{map: this.map}
        });
        local.search(this.keyword);
      },600)
    },


    // baidu-map组件的ready事件
    mapReady ({BMap, map}) {
        this.BMap = BMap;
        this.map = map;

        geocoder = new BMap.Geocoder(); //创建地址解析器的实例
        if(this.model.hasOwnProperty('address')){//如果当前model中包含address 则证明是修改弹框里面的地址数据（地址存在，打开弹框显示地址标点）
          this.keyword = this.model.address
          this.inputValue = this.model.address
        }else{//否则显示默认标点（这里的经纬度代表成都）
        //第二个参数  10 代表地图缩 放级别,最大为19,最小为0

          setTimeout(() => {
                this.map.centerAndZoom(new BMap.Point(113.93588, 22.74894), 14);
          }, 1000);
          this.keyword = ''
          this.inputValue = ''
        }
        // 点击百度地图上的搜索出来的红色标记点
        map.addEventListener("click", ({ point }) => {
          this.location.lng = point.lng;
          this.location.lat = point.lat;
          geocoder.getLocation(point, res => {
            this.inputValue = res.address;
            this.model.address = res.address;
            this.model.storeLongitude = point.lng
            this.model.storeLatitude = point.lat
            this.$forceUpdate();
          });
        });
    },

    // 地区组件的markersset事件
    setAddressList(e){
      console.log(e);
    },

4.效果展示

 

 5.关于定位中心点centerAndZoom失效的解决方法

添加一个定时器，setTimeout 加个100毫秒延迟

          setTimeout(() => {
                this.map.centerAndZoom(new BMap.Point(113.93588, 22.74894), 14);
          }, 1000);

参考链接---https://blog.csdn.net/qq_44162778/article/details/124499687

参考链接---https://blog.csdn.net/weixin_39423672/article/details/103455330?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-103455330-blog-114683396.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-103455330-blog-114683396.pc_relevant_paycolumn_v3&utm_relevant_index=1