VUE3使用antd引入百度地图 实现位置查询，获取地址经纬度

实现效果：

1.index.html 中先引入下

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己申请的key"></script>

申请密钥key地址：登录百度账号

注册登录后创建应用，根据自己需求选择

2.新建bmp.js文件，引入百度地图 JavaScript API v3.0 文件

export function BMPGL(ak值) {
  return new Promise(function (resolve, reject) {
    window.init = function () {
      // eslint-disable-next-line
      resolve(BMapGL)
    }
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${申请的ak值}&callback=init`
    script.onerror = reject
    document.head.appendChild(script)
  })
}

3.页面中使用

3.1 开发表单样式

    <a-form-item :name="['venue', 'address']" label="场馆地址" :rules="[{ required: true }]">
       
     <a-auto-complete
            v-model:value="formData.venue.address"
            placeholder="请输入详细地址"
            :options="mapList"
            :trigger-on-focus="false"
            id="suggestId"
            @select="onSearch"
            @search="querySearch"
            value-key="title"
            allow-clear
          >
        </a-auto-complete>
    <a-input v-model:value="formData.venue.addressLongitude" placeholder="经度" :rules="[{ required: true }]" disabled/>
    <a-input v-model:value="formData.venue.addressLatitude" placeholder="纬度" :rules="[{ required: true }]" disabled/>
   <div id="container" style="width: 100%; height: 500px"></div>
  </a-form-item>

3.2 引入bmp.js

import { BMPGL } from "@/bmp.js"

3.3 开发相关逻辑及地图渲染

//地图开始----------

let map = ref(null);
const mapZoom = ref(15);
const ak = ref("申请的ak");

const initMap = () => {
  map.value = null;
  BMPGL(ak.value).then((BMapGL: any) => {
    map.value = new BMapGL.Map("container");
    var ac = new BMapGL.Autocomplete({
      //建立一个自动完成的对象
      input: "suggestId",
      location: map.value,
    })
    var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
    console.log(map.value, '里面有数据吗---',BMapGL)
    map.value.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
    map.value.addControl(cityCtrl);
    var LocationControl = new BMapGL.LocationControl(); // 添加定位控件，用于获取定位
    map.value.addControl(LocationControl);
    var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
    map.value.addControl(scaleCtrl);
    map.value.setMapType(); // 设置地图类型为标准地图模式；
    var LocalSearch = new BMapGL.LocalSearch()
     map.value.addControl(LocalSearch);
    var localcity = new BMapGL.LocalCity();
    localcity.get((e: { name: any }) => {
      map.value.centerAndZoom(e.name, mapZoom.value);
    })
    let point: any;
    //初始化的时候如果有经纬度，需要先在地图上添加点标记
    if (formData.venue.addressLongitude && formData.venue.addressLatitude) {
      point = new BMapGL.Point(formData.venue.addressLongitude, formData.venue.addressLatitude);
      map.value.centerAndZoom(point, mapZoom.value);
      var marker2 = new BMapGL.Marker(point);
      //在地图上添加点标记
      map.value.addOverlay(marker2);
    }
    map.value.enableScrollWheelZoom(true);
    map.value.setHeading(64.5);
    map.value.setTilt(73);

    //点击下拉框的值
    map.value.addEventListener(
      "click",
      function (e: { latlng: { lng: string; lat: string } }) {
        map.value.clearOverlays();
        var point1 = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
        // 创建点标记
        var marker1 = new BMapGL.Marker(point1);
        // 在地图上添加点标记
        map.value.addOverlay(marker1);
        formData.venue.addressLongitude = e.latlng.lng;
        formData.venue.addressLatitude = e.latlng.lat;
        var geoc = new BMapGL.Geocoder(); // 创建地址解析器的实例
        geoc.getLocation(point1, (rs: { content: any; }) => {
          let adr = rs.content;
          console.log(adr,'99999999')
           formData.venue.address =
            adr.address +
            adr.address_detail.street +
            adr.address_detail.street_number +
            adr.poi_desc; // 省市区街道门牌号具体地址
        });
      }
    )
  })
}
  
const mapList = ref([])
  // 获取搜索经纬度
const querySearch = (e: any) => {
      // 搜索
  map.value.clearOverlays(); //清除地图上所有覆盖物
  //智能搜索
      var local = new BMapGL.LocalSearch (map.value, {
        onSearchComplete: () => {
          //获取第一个智能搜索的结果
          const aa = local.getResults()._pois
          let listss
           listss = aa.map((domain: { title: string; address: string; point: any; }) => {
          return {
            value: domain.title ? domain.title + '--' + domain.address : domain.title ,
            location: domain.point
         }
        })
         mapList.value = listss
          const pp = local.getResults().getPoi(0).point;
          map.value.centerAndZoom(pp, mapZoom.value);
          map.value.addOverlay(new BMapGL.Marker(pp)); //添加标注
        }
      })
      local.search(formData.venue.address);

  }

//选择搜索列表数据
const onSearch = (item: any,val: { location: { lng: any; lat: any; }; }) => {
      map.value.clearOverlays();
        var point1 = new BMPGL.Point(val.location.lng,val.location.lat);
        // 创建点标记
        var marker1 = new BMPGL.Marker(point1);
        // 在地图上添加点标记
        map.value.addOverlay(marker1);
         formData.venue.addressLongitude= val.location.lng;
         formData.venue.addressLatitude = val.location.lat;
        var geoc = new BMPGL.Geocoder(); // 创建地址解析器的实例
         geoc.getLocation(point1, (rs: { content: any; }) => {
           let adr = rs.content;
           formData.venue.local = adr.address
           formData.venue.address = item
        });

  }
//地图结束---------

3.4页面初始调用

onMounted( async () => {
  nextTick(() => {
        // 此时可以访问最新的DOM元素  
      initMap()
    });
})

最后就完成啦