记一次vue端使用百度地图获取经纬度的问题（详细版）

支持 搜索位置 获取经纬度，以及 点击地图 获取经纬度

第一步安装依赖

npm i --save vue-baidu-map

或者

yarn add vue-baidu-map

第二步引入百度地图key值和sdk
key值要去百度地图开放平台申请

第三步写一个div，并给上id

第四步在script首行定义BMap对象，否则底下每次new BMap都要加上window

第五步创建并初始化BMap

this.bMap = new BMap.Map("container");
      const _this = this;
      this.bMap.addEventListener("click", function(e) {
        _this.setPosion(e.point);
});
this.bMap.addControl(new BMap.MapTypeControl()); // 添加地图类型控件
this.bMap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
this.setPosion({ lng: lngLat[0], lat: lngLat[1] });

setPosion方法如下

setPosion(lngLat) {
      // 清除所有地图坐标
      this.bMap.clearOverlays();
      // 添加地图坐标
      const point = new BMap.Point(lngLat.lng, lngLat.lat);
      this.bMap.centerAndZoom(point, 15); // 初始化地图
      this.bMap.addOverlay(new BMap.Marker(lngLat));
      this.lngLat = [lngLat.lng, lngLat.lat];
      this.showDropDownList = false;
}

以上设置即可显示地图，点击地图即可获取经纬度

========================================
下面说一下实现搜索位置获取经纬度的功能
第一步定义一个输入框

<a-input
    type="text"
    v-model="searchText"
  />

第二步监听该输入框值的变化，将该输入框的值拿去搜索所有的位置

const _this = this;
const search = new BMap.LocalSearch(this.bMap);
search.setSearchCompleteCallback(function(searchResult) {
  let locArr = searchResult.Kr;
  locArr = locArr.map((o) => {
    return {
      id: o.uid,
      name: `${o.title}>${o.address}>${o.city}`,
      lngLat: { lng: o.point.lng, lat: o.point.lat },
    };
  });
  _this.selectList = locArr;
});
search.search(val);

这里 selectList 即使所有的搜索结果，可以展示出来，点击获取经纬度，这里我是放在下拉框组件中的。
最后的实现效果是这样的

最后上完整代码，我是将它写成组件的，另外我是用的是Ant Design of Vue，你们可以自己复制下来根据自己的需求更改

<template>
  <div>
    <a-row>
      <a-col :span="12">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="经度">
          {{ lngLat[0] }}
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="纬度">
          {{ lngLat[1] }}
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="搜索">
          <a-dropdown
            ref="drop"
            :visible="showDropDownList && showModal"
            @focusout="
              () => {
                showDropDownList = false;
              }
            "
          >
            <a-input
              type="text"
              v-model="searchText"
              @click="
                () => {
                  showDropDownList = !showDropDownList;
                }
              "
            />
            <a-menu slot="overlay">
              <a-menu-item
                v-for="x of selectList"
                :key="x.id"
                @click="setPosion(x.lngLat)"
              >
                <span>{{ x.name }}</span>
                <span style="font-weight: bolder; margin-left: 10px"
                  >点击定位</span
                >
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <span style="color: #aaa"
          >*双击地图可以进行跳转。标注可定位的搜索项能够直接定位到准确位置，标注可搜索的搜索项点击后将以其内容进行再次搜索。</span
        >
      </a-col>
    </a-row>
    <div
      id="container"
      :style="{ width: '100%', height: mapHeight, margin: '10px 0' }"
    />
    <a-row style="margin-top: 20px">
      <a-col :span="24" style="display: flex; justify-content: center">
        <a-button-group>
          <a-button @click="updateLngLat(lngLat)">更新</a-button>
          <a-button @click="handleCloseModal">取消</a-button>
        </a-button-group>
      </a-col>
    </a-row>
  </div>
</template>

<script>
const BMap = window.BMap;
export default {
  name: "BMapSelector",
  props: {
    itemData: {
      type: Object,
      default: () => {},
    },
    updateLngLat: {
      type: Function,
      default: () => {},
    },
    defaultLngLat: {
      type: Array,
      default: () => {
        return [120.545532, 31.282485];
      },
    },
    handleCloseModal: {
      type: Function,
      default: () => {},
    },
    showModal: {
      type: Boolean,
      default: true,
    },
    mapHeight: {
      type: String,
      default: "500px",
    },
  },
  data() {
    return {
      bMap: {},
      showDropDownList: true,
      selectList: [],
      searchText: "",
      lngLat: [0, 0],
      labelCol: { xs: { span: 24 }, sm: { span: 5 } },
      wrapperCol: { xs: { span: 24 }, sm: { span: 12 } },
    };
  },
  created() {
    if (this.itemData.lng && this.itemData.lat) {
      this.lngLat = [this.itemData.lng * 1, this.itemData.lat * 1];
    } else {
      this.lngLat = this.defaultLngLat;
    }
  },
  mounted() {
    this.createMap();
    this.createMarker(this.lngLat);
  },
  methods: {
    createMap() {
      this.bMap = new BMap.Map("container");
      const _this = this;
      this.bMap.addEventListener("click", function(e) {
        _this.setPosion(e.point);
      });
    },
    createMarker(lngLat) {
      this.bMap.addControl(new BMap.MapTypeControl()); // 添加地图类型控件
      this.bMap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      this.setPosion({ lng: lngLat[0], lat: lngLat[1] });
    },
    update() {
      this.showDropDownList = false;
      this.updateLngLat(this.lngLat);
    },
    setPosion(lngLat) {
      // 清除所有地图坐标
      this.bMap.clearOverlays();
      // 添加地图坐标
      const point = new BMap.Point(lngLat.lng, lngLat.lat);
      this.bMap.centerAndZoom(point, 15); // 初始化地图
      this.bMap.addOverlay(new BMap.Marker(lngLat));
      this.lngLat = [lngLat.lng, lngLat.lat];
      this.showDropDownList = false;
    },
  },
  watch: {
    searchText(val) {
      const _this = this;
      const search = new BMap.LocalSearch(this.bMap);
      search.setSearchCompleteCallback(function(searchResult) {
        let locArr = searchResult.Kr;
        locArr = locArr.map((o) => {
          return {
            id: o.uid,
            name: `${o.title}>${o.address}>${o.city}`,
            lngLat: { lng: o.point.lng, lat: o.point.lat },
          };
        });
        _this.selectList = locArr;
      });
      search.search(val);
      this.showDropDownList = true;
    },
  },
};
</script>
<style scoped></style>

这里是调用

<BMapSelector
        mapHeight="360px"
        :itemData="{ lng: itemData.customer_lng, lat: itemData.customer_lat }"
        :updateLngLat="
        () => {
          //更新按钮监听事件
          }
        "
        :handleCloseModal="
          () => {
          //关闭按钮监听事件
          }
        "
      />