最近再做一個新能源回收項(xiàng)目，項(xiàng)目中有個根據(jù)回收點(diǎn)坐標(biāo)數(shù)據(jù)顯示區(qū)域內(nèi)回收點(diǎn)位置，點(diǎn)擊圖標(biāo)直接導(dǎo)航到該位置，及分布的需求，研究了一下，實(shí)現(xiàn)效果如下，實(shí)現(xiàn)起來很簡單，代碼及效果

回收點(diǎn)位置及分布效果如圖：

點(diǎn)擊圖標(biāo)導(dǎo)航直達(dá)效果：

代碼如下

data() {return {longitude: 118.796877, // 初始經(jīng)度latitude: 32.060255,  // 初始緯度scale: 14,           // 初始縮放級別markers: [],         // 用于存儲地圖上的標(biāo)記數(shù)據(jù)};},onLoad() {// 假設(shè)這里你已經(jīng)通過API獲取了ArcGIS圖層中的點(diǎn)位數(shù)據(jù)，并解析成了以下格式：  const pointsData = [  { id: 1, latitude: 32.060255, longitude: 118.796877, iconPath: '/static/icondc/icon2.png' },{ id: 2, latitude: 31.943066, longitude: 118.795807, iconPath: '/static/icondc/icon2.png' },{ id: 3, latitude: 32.060005, longitude: 118.788877, iconPath: '/static/icondc/icon2.png' },{ id: 4, latitude: 32.056232, longitude: 118.797241, iconPath: '/static/icondc/icon2.png' },{ id: 5, latitude: 32.05338585150547, longitude: 118.79315867787933, iconPath: '/static/icondc/icon2.png' },// ... 其他點(diǎn)位數(shù)據(jù)  ];  // 將點(diǎn)位數(shù)據(jù)轉(zhuǎn)換為小程序map組件可以識別的markers數(shù)組  const markers = pointsData.map(point => ({  id: point.id,  latitude: point.latitude,  longitude: point.longitude,  iconPath: point.iconPath, // 自定義圖標(biāo)路徑，注意路徑可能需要是相對于項(xiàng)目的靜態(tài)資源路徑  width: 50, // 標(biāo)記寬度  height: 50, // 標(biāo)記高度  }));  this.markers = markers; // 在 uni-app 中，你可以直接修改 data 中的屬性來觸發(fā)視圖更新  },methods: {// 用于處理 marker 的點(diǎn)擊事件onMarkerTap(event) {const markerId = event.markerId; // 獲取當(dāng)前點(diǎn)擊的 marker 的 idconst tappedMarker = this.markers.find(marker => marker.id === markerId); // 根據(jù) id 獲取點(diǎn)擊的 marker 數(shù)據(jù)if (!tappedMarker) return; // 如果找不到 marker，則不執(zhí)行后續(xù)操作// 在這里可以彈出一個浮窗提示用戶是否導(dǎo)航到這里// 假設(shè)有一個自定義的彈窗組件 showDialog 可以接收一個回調(diào)函數(shù)this.showDialog(() => {// 當(dāng)用戶點(diǎn)擊確認(rèn)后，執(zhí)行導(dǎo)航操作uni.openLocation({latitude: tappedMarker.latitude,longitude: tappedMarker.longitude,success() {console.log('導(dǎo)航成功');},fail() {console.log('導(dǎo)航失敗');}});});},