v3+ts中使用百度地图 附带搜索地址

 话不多说 直接上源码

let addressInfo = reactive({
  longitude: "", // 经度
  latitude: "", // 纬度
  province: "", // 省
  city: "", // 市
  district: "", // 区
  address: "", // 详细地址
});
let openMap = ref(false);

const point: any = ref({});
const ac: any = ref({});
onMounted(async () => {});

let myBMap = ref();
let mymap = ref();
const initMap = () => {
  BMapLoader("C8tEx8DnTWxWDvx0pNpOI6ouKGtA5Ej5").then((BMap) => {
    var map = new BMap.Map("baidu-map-container");
    myBMap.value = BMap;
    mymap.value = new myBMap.value.Map("baidu-map-container", {
      enableMapClick: false,
    });
    mymap.value.disableKeyboard(); // 禁用键盘操作地图
    mymap.value.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
    // 添加中心点和缩放等级，如果不添加，初始化出来页面为白屏
    point.value = new myBMap.value.Point(120.872114, 32.038276);
    mymap.value.centerAndZoom(point.value, 15);
    mymap.value.addEventListener("click", function (e: any) {
      mymap.value.clearOverlays();
      let pt = e.latlng;
      let marker = new myBMap.value.Marker(
        new myBMap.value.Point(pt.lng, pt.lat)
      );
      mymap.value.addOverlay(marker);
      geocAddress(pt);
    });
    ac.value = new myBMap.value.Autocomplete({
      input: "suggestId",
      location: map.value,
    });
    ac.value.addEventListener("onconfirm", function (e: any) {
      mymap.value.clearOverlays(); // 移除地图上的标注
      let local = new myBMap.value.LocalSearch(map, {
        //智能搜索
        onSearchComplete: function (results: any) {
          let poi = results.getPoi(0); //获取第一个智能搜索的结果
          console.log(poi);
          let searchpt = poi.point; // 获取坐标
          mymap.value.centerAndZoom(searchpt, 16);
          mymap.value.addOverlay(new myBMap.value.Marker(searchpt)); //添加标注
          geocAddress(searchpt); // 逆地址解析
        },
      });
      let searchValue = e.item.value;
      local.search(
        searchValue.province +
          searchValue.city +
          searchValue.district +
          searchValue.street +
          searchValue.business
      );
    });
    /** 搜索地址End */
  });
};

const geocAddress = (point: any) => {
  let geoc = new myBMap.value.Geocoder();
  geoc.getLocation(point, function (rs: any) {
    console.log(rs);
    let { address } = rs;
    let { addressComponents } = rs;
    let inPoint = rs.point;
    addressInfo.address = address;
    form.province = addressComponents.province;
    form.city = addressComponents.city;
    form.adress = address;
    form.xadress = point.lng;
    form.yadress = point.lat;
  });
};
const openMapc = () => {
  openMap.value = true;
  initMap();
};