在Vue 3 + TypeScript项目中集成百度地图，实现自定义图标点、点击图标弹出提示弹窗、将点移动到展示区域中心以及添加定位功能

 创建地图组件

在Vue 3项目中创建一个地图组件BaiduMap.vue：

<template>  
  <!-- 地图容器，ref="mapContainer" 用于在 Vue 实例中引用这个 DOM 元素 -->  
  <div ref="mapContainer" class="map-container"></div>  
</template>  
  
<script lang="ts">  
import { defineComponent, onMounted, ref } from 'vue';  
  
export default defineComponent({  
  name: 'BaiduMap',  
  setup() {  
    const mapContainer = ref<HTMLElement | null>(null);
        let BMap: any = null;

        onMounted(async () => {
            try {
                await loadBaiduMapSDK('您的AK');
                if (mapContainer.value) {
                    // 初始化地图
                    BMap = window['Bmap'];
                    const map = new BMap.Map(mapContainer.value);
                    const point = new BMap.Point(116.404, 39.915); // 默认中心点
                    map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
                    // 启用滚轮放大缩小
                    map.enableScrollWheelZoom(true);

                    // 添加定位控件
                    const geolocationControl = new BMap.GeolocationControl();
                    map.addControl(geolocationControl);
                    geolocationControl.addEventListener("locationSuccess", function (e) {
                        // 定位成功事件
                        let address = '';
                        if (e.addressComponent) {
                            address = e.addressComponent.province + e.addressComponent.city + e.addressComponent.district + e.addressComponent.street + e.addressComponent.streetNumber;
                        }
                        alert("当前定位地址为：" + address);
                    });
                    geolocationControl.addEventListener("locationError", function (e) {
                        // 定位失败事件
                        alert(e.message);
                    });

                    // 添加自定义图标点
                    const myIcon = new BMap.Icon("自定义图标的URL", new BMap.Size(50, 50));
                    const marker = new BMap.Marker(point, { icon: myIcon });  // 创建标注
                    map.addOverlay(marker);

                    // 点击图标弹出提示弹窗
                    const infoWindow = new BMap.InfoWindow("这里是信息窗口内容", { width: 200, height: 100 });
                    marker.addEventListener("click", function () {
                        map.openInfoWindow(infoWindow, point); //开启信息窗口
                    });
                }
            } catch (error) {
                console.error('百度地图API加载失败', error);
            }
        });

        function loadBaiduMapSDK(ak: string): Promise<void> {
            return new Promise((resolve, reject) => {
                // 检查是否已加载
                if (typeof BMap !== 'undefined') {
                    resolve();
                    return;
                }
                // 动态创建script标签加载百度地图API
                const script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = `http://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=onBMapCallback`;
                document.head.appendChild(script);
                // 全局回调函数
                (window as any).onBMapCallback = () => {
                    resolve();
                };
                script.onerror = (e) => {
                    reject(e);
                };
            });
        }

        return {
            mapContainer,
        };
  },  
});  
</script>  
  
<style>  
.map-container {  
  /* 设置地图容器的宽度为 100%，高度为 500px */  
  width: 100%;  
  height: 500px;  
}  
</style>