废话不多说核心useMap代码如下import { ElMessage } from element-plus import { useI18n } from vue-i18n const DEFAULT_LAT 13.752082783751177 const DEFAULT_LNG 100.49313364056417 export function useMap() { const { t } useI18n() let map null // 主坐标点始终存在 let mainMarker null // 周边坐标点集合 let aroundMarkers [] /** * 初始化地图 * param {HTMLElement} root 地图容器 * param {Object} point 主坐标点 * param {Boolean} defaultFlag 是否使用默认坐标 */ function initMap(root, point {}, defaultFlag false) { let lat, lng if (defaultFlag) { lat DEFAULT_LAT lng DEFAULT_LNG } else { lat Number(point.latitude) || DEFAULT_LAT lng Number(point.longitude) || DEFAULT_LNG } map new google.maps.Map(root, { zoom: 12, center: { lat, lng }, mapTypeControl: false, scaleControl: false, streetViewControl: false, fullscreenControl: false }) // 创建主坐标点 Marker mainMarker new google.maps.Marker({ map, position: { lat, lng } }) } /** * 渲染周边坐标点不影响主点 * Marker 与 InfoWindow 在此阶段一并创建 * param {Array} list 周边点数据 */ function addAroundMarkers(list []) { if (!map || !Array.isArray(list)) return // 清理旧的周边点 aroundMarkers.forEach(item { item.marker.setMap(null) }) aroundMarkers [] list.forEach(item { const lat Number(item.latitude) const lng Number(item.longitude) const title item.title || if (Number.isNaN(lat) || Number.isNaN(lng)) return const marker new google.maps.Marker({ map, position: { lat, lng }, title }) const infoWindow new google.maps.InfoWindow({ content: title }) // Marker 点击时显示 InfoWindow marker.addListener(click, () { infoWindow.open(map, marker) }) aroundMarkers.push({ latitude: lat, longitude: lng, marker, infoWindow }) }) } /** * 点击周边列表项时 * 以主点为参考展示主点与当前周边点 * 并打开对应的 InfoWindow * param {Object} point 周边点 */ function focusAroundPoint({ latitude, longitude }) { if (!map || !mainMarker) return const lat Number(latitude) const lng Number(longitude) if (Number.isNaN(lat) || Number.isNaN(lng)) { ElMessage.warning(t(位置信息异常)) return } const mainPos mainMarker.getPosition() const aroundPos new google.maps.LatLng(lat, lng) const bounds new google.maps.LatLngBounds() bounds.extend(mainPos) bounds.extend(aroundPos) map.fitBounds(bounds, { top: 60, right: 60, bottom: 60, left: 60 }) // 关闭所有 InfoWindow aroundMarkers.forEach(item { item.infoWindow.close() }) // 打开目标点的 InfoWindow const target aroundMarkers.find( item item.latitude lat item.longitude lng ) if (target) { target.infoWindow.open(map, target.marker) } } /** * 打开 Google Maps新窗口 * param {Object} point 坐标点 */ function openMap(point) { if (!point?.latitude || !point?.longitude) { ElMessage.warning(t(位置信息缺失)) return } const lat Number(point.latitude) const lng Number(point.longitude) if (Number.isNaN(lat) || Number.isNaN(lng)) { ElMessage.warning(t(位置信息异常)) return } const title encodeURIComponent(point.title || ) const url https://www.google.com/maps/search/?api1query${lat},${lng}(${title}) window.open(url, _blank) } return { initMap, addAroundMarkers, focusAroundPoint, openMap } }htmldiv classmap-section !-- 地图容器 -- div classmap-container refmapRef/div !-- 主标题可点击打开 Google Maps -- div classaddress-name clickopenMap(mainPoint) {{ mainPoint.title }} /div !-- 周边列表 -- div classaround-list v-ifaroundList.length div classaround-item v-for(item, index) in aroundList :keyindex clickfocusAroundPoint(item) div classlabel{{ item.title }}/div /div /div !-- 距离提示 -- div classdistance-tips {{ $t(显示距离) }} /div /div调用示例script setup import { ref, onMounted } from vue import { useMap } from /composables/useMap // 地图容器 const mapRef ref(null) // 主点示例数据 const mainPoint { latitude: 13.75208, longitude: 100.49313, title: Main Location } // 周边点列表示例数据 const aroundList [ { latitude: 13.756, longitude: 100.501, title: Nearby Point A }, { latitude: 13.748, longitude: 100.485, title: Nearby Point B } ] // 使用 useMap const { initMap, addAroundMarkers, focusAroundPoint, openMap } useMap() onMounted(() { // 初始化地图 initMap(mapRef.value, mainPoint) // 渲染周边 MarkerMarker InfoWindow 一次性创建 addAroundMarkers(aroundList) }) /script结果展示如下图