vue3+uniapp中使用高德地圖實現(xiàn)撒點效果(操作步驟)

更新時間：2025年05月23日 10:25:09 作者：浩星

這篇文章主要介紹了vue3+uniapp中使用高德地圖實現(xiàn)撒點效果(操作步驟),本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧

實現(xiàn)效果：

操作步驟：

1、引入高德插件，并生成js配置插件，詳情步驟請點我

import amapFile from '../../libs/amap-wx.js'

2、頁面上配置我們的map標簽

<template>
	<!-- 地圖控件 -->
	<view>
		<map 
			id="map" 
			:longitude="mapObj.longitude" 
			:latitude="mapObj.latitude" 
			:scale="mapObj.scale" 
			:markers="mapObj.markers"
			@markertap="markertap"
			@click="mapClick"
		></map>
	</view>
</template>

3、js部分，定義我們相關變量

let mapObj = reactive({
		longitude:116.481028, //經(jīng)度
		latitude:39.989643, //維度
		scale:17, //地圖默認縮放等級
		markers: [], //點位數(shù)據(jù)
	})
	let locationListener = ref('')
	let initMap = function(){
		const myAmapFun = new amapFile.AMapWX({
			key: 'bb****', // 你的高德地圖API Key
		});
		console.log('myAmapFun',myAmapFun)
	}
	onShow(()=>{
		initMap()
		initMapWZ()
	})

4、獲取我們當前位置

// 獲取當前位置信息
	let initMapWZ = function(){
		console.log('init')
		// uni.getLocation uniapp官網(wǎng)提供的獲取定位的方法，調(diào)用過多會導致無法使用，需要使用監(jiān)聽方法
		uni.getLocation({
			type: 'gcj02', //國測局坐標 gcj02,要使用地圖map必須使用這個
			success: res=> {
				getNowDWBackFun(res)
			},
			fail:err=>{
				//getLocation:fail 頻繁調(diào)用會增加電量損耗，可考慮使用 wx.onLocationChange 監(jiān)聽地理位置變化
				console.log(err)
				startLocationWatch()
			},
			complete:()=>{
				console.log('complete')
			}
		})
	}

5、更新我們當前實時位置

let startLocationWatch = ()=> {
	  // 1. 檢查權限
	  uni.authorize({
	    scope: 'scope.userLocation',
	    success: () => {
	      // 2. 開啟位置更新
	      uni.startLocationUpdate({
	        success: () => {
	          // 3. 監(jiān)聽位置變化
	          locationListener = uni.onLocationChange((res) => {
	            // 在此更新地圖或處理位置數(shù)據(jù)
				getNowDWBackFun(res)
	          })
	        },
	        fail: (err) => {
	          console.error('啟動位置更新失?。?, err)
	        }
	      })
	    },
	    fail: () => {
	      uni.showModal({
	        title: '權限提示',
	        content: '需要位置權限以持續(xù)獲取位置',
	        success: (res) => {
	          if (res.confirm) uni.openSetting()
	        }
	      })
	    }
	  })
	}

6、將我們當前位置，用圖片展示在地圖上

// 拿到當前最新位置以后的回調(diào)方法
	let getNowDWBackFun = res=>{
		console.log('當前位置的經(jīng)度：' + res.longitude);
		console.log('當前位置的緯度：' + res.latitude);
		mapObj.longitude = res.longitude
		mapObj.latitude = res.latitude
		mapObj.markers = [{
			id: 1,
			longitude:res.longitude,
			latitude: res.latitude,
			iconPath: '../../static/now.png',
			title: '當前位置',
			width:25,
			height:25
		}]
	}

7、當我們的界面關閉時候，停止我們的實時更新位置方法

// 停止監(jiān)聽
	let stopLocationWatch = ()=>{
	  if (locationListener.value) {
	    uni.stopLocationUpdate() // 停止位置更新
	  }
	}
	onHide(()=>{
		stopLocationWatch()
	})

到此這篇關于vue3+uniapp中使用高德地圖實現(xiàn)撒點效果的文章就介紹到這了,更多相關vue3 uniapp高德地圖撒點內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: