百度地图的搜索、控件、点击获取城市名称和经纬度

本文章主要内容：1、展示百度地图；2、百度地图控件；3、实现搜索城市的功能，返回附近地址名称；4、点击地图返回当前地址名称和经纬度；5、自定义图片。

引入百度地图脚本文件

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=引入自己的ak"></script>

<template>
  <div class="map_ent">
    <el-input v-model="mapAddress" id="addressInput" placeholder="请输入查询的地址" :prefix-icon="Search" clearable
      @input="iptChange" @focus="iptFocus" @blur="iptBlur" />
    <div ref="mapDom" class="map"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue';
import addressImg from '../../../assets/img/map/map_icon.png';

onMounted(() => {
  initMap();
})

const mapDom = ref(null);//地图容器
const map = ref();//地图实例
const zoom = ref(15);//缩放值
const mapAddress = ref();//地址
const timer = ref(null);

const initMap = () => {
  map.value = new BMap.Map(mapDom.value);//创建地图实例
  let point = new BMap.Point(103.834265, 36.061047);//中心点坐标

  map.value.centerAndZoom(point, zoom.value);//设置中心点和缩放级别
  map.value.enableScrollWheelZoom(true); //滚轮缩放

  // var scaleCtrl = new BMap.ScaleControl();  // 添加比例尺控件
  // map.value.addControl(scaleCtrl);
  // var cityCtrl = new BMap.CityListControl();  // 添加城市列表控件
  // map.value.addControl(cityCtrl);
  // var cityCtrl = new BMap.CityListControl();  // 添加城市列表控件
  // map.value.addControl(cityCtrl);

  // type值 1、BMAP_NAVIGATION_CONTROL_LARGE 2、BMAP_NAVIGATION_CONTROL_SMALL 3、BMAP_NAVIGATION_CONTROL_PAN 4、BMAP_NAVIGATION_CONTROL_ZOOM
  map.value.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_ZOOM }));//平移缩放控件
  map.value.addControl(new BMap.ScaleControl());//比例尺控件
  map.value.addControl(new BMap.OverviewMapControl());//右侧缩略图控件
  map.value.addControl(new BMap.MapTypeControl());//地图类型控件
  // map.value.addControl(new BMap.CopyrightControl());//版权控件
  map.value.addControl(new BMap.GeolocationControl());//定位当前位置的控件  

  // map.value.setMapStyleV2({
  //   styleId: 'ad885ff0cb73e6ba061a4d8e9276c1c3'
  // });

  map.value.addEventListener("click", function (e) {
    console.log('点地图中的经纬度坐标', e.point.lng, e.point.lat);
    const point = new BMap.Point(e.point.lng, e.point.lat);
    // console.log('point转化后的经纬度坐标', point);
    const geocoder = new BMap.Geocoder();
    geocoder.getLocation(point, (result) => {
      if (result) {
        console.log('解析成功', result);
        // 清除当前地图上的覆盖物
        map.value.clearOverlays();
        // 在当前地图上添加标注
        map.value.addOverlay(new BMap.Marker(point, zoom.value));
        // 显示当前地址
        mapAddress.value = result.surroundingPois[0]?.title || result.address;
      }
    })
  })
}

const iptChange = () => {
  // fun1()
  if (timer.value) {
    clearTimeout(timer.value);
  };
  timer.value = setTimeout(() => {
    console.log('改变的值', mapAddress.value);
    fun1()
  }, 1000);
}

const iptFocus = () => {
  console.log('输入框获取焦点', mapAddress.value);
  // if (!mapAddress.value) return;
  if (!mapAddress.value) {
    mapAddress.value = '';
  }
  fun1()
}

const iptBlur = () => {
  console.log('输入框失去焦点');
}
const fun1 = () => {
  var ac = new BMap.Autocomplete({
    input: "addressInput",
    // 作用：指定一个地图中心点，用于限制搜索范围。可以是一个BMap.Point对象，表示经纬度坐标。如果不指定，将在全球范围内搜索。
    // 示例：location: new BMap.Point(116.404, 39.915)，这里指定了北京市中心的经纬度坐标作为搜索范围的中心点。
    location: map.value,
    // 作用：设置初始输入值，用于在自动完成功能初始化时显示一些提示。
    // 示例：value: "北京市"，在输入框中预先显示 “北京市”，以便触发自动完成的提示。
    value: mapAddress.value
  });
  ac.setInputValue(mapAddress.value);
  // 监听自动完成的 onconfirm 事件
  ac.addEventListener("onconfirm", function (e) {
    console.log('回显的数据', e);
    const myCity = e.item.value;
    mapAddress.value = myCity.province + myCity.city + myCity.district + myCity.street + myCity.business;
    // mapAddress.value = myCity;
    var myGeo = new BMap.Geocoder();
    myGeo.getPoint(mapAddress.value, function (point) {
      if (point) {
        console.log('解析成功point', point);
        map.value.centerAndZoom(point, zoom.value);
        let myIcon = new BMap.Icon(
          addressImg,
          new BMap.Size(200, 200)
        );
        myIcon.setImageSize(new BMap.Size(200,200));//设置图片大小，实现了缩放的效果
        map.value.clearOverlays(); //清除地图上所有覆盖物
        map.value.addOverlay(new BMap.Marker(point, { icon: myIcon }));
        // map.value.addOverlay(new BMap.Marker(point));
      } else {
        alert("您选择地址没有解析到结果!");
      }
    })
    // 在这里可以将选中的推荐地址显示在页面上或者进行其他处理
  });
}





</script>

<style scoped>
.map {
  width: 700px;
  height: 500px;
}
</style>

效果

1、百度地图的显示

2、搜索功能以及回显

3、搜索的结果以及自定义图片

4、点击获取城市名称