百度地圖申請地址：控制臺 | 百度地圖開放平臺

效果：

1.后臺

1.1申請百度地圖APi

1.2 引入百度地圖

 <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=自己百度生氣apikey"></script>

1.3 v2組件

<template><div><!-- 地圖容器 --><div id="map-container" class="map-container"></div><!-- 結果展示區域 --><div class="result">搜索：<el-input v-model="keyMap" placeholder="請輸入地址" size="small" clearable></el-input><el-button type="primary" size="small" @click="searchAddress">搜索</el-button></div></div>
</template><script>
export default {data() {return {keyMap: '',map: null,marker: null,geoc: null};},methods: {updatePositionAndAddress(point) {this.$emit('update:marker-position', {lat: point.lat,lng: point.lng});this.geoc.getLocation(point, (rs) => {if (rs) {this.$emit('update:address', rs.address);}});},handleMapClick(e) {if (this.marker) {this.map.removeOverlay(this.marker);}this.marker = new BMap.Marker(e.point);this.map.addOverlay(this.marker);this.updatePositionAndAddress(e.point);},searchAddress() {if (!this.keyMap) return;const local = new BMap.LocalSearch(this.map, {renderOptions: { map: this.map },onSearchComplete: (results) => {if (results.getNumPois()) {const firstResult = results.getPoi(0);const point = firstResult.point;if (this.marker) {this.map.removeOverlay(this.marker);}this.marker = new BMap.Marker(point);this.map.addOverlay(this.marker);this.map.centerAndZoom(point, 15);this.updatePositionAndAddress(point);}}});local.search(this.keyMap);}},mounted() {if (!window.BMap) {console.error('百度地圖 API 未正確加載，請檢查 API 密鑰和腳本鏈接');return;}this.map = new BMap.Map('map-container');this.map.centerAndZoom(new BMap.Point(102.755, 25.134), 13);this.map.enableScrollWheelZoom();this.geoc = new BMap.Geocoder();this.map.addEventListener('click', this.handleMapClick);}
};
</script><style scoped>
.map-container {width: 600px;height: 500px;
}.result {margin-top: 10px;font-size: 14px;
}
</style>

1.4 v3組件

<template><div><!-- 地圖容器 --><div id="map-container" class="map-container"></div><!-- 結果展示區域 --><div class="result">搜索：<el-input v-model="keyMap" placeholder="請輸入地址" size="small" clearable></el-input><el-button type="primary" size="small" @click="searchAddress">搜索</el-button></div></div>
</template><script setup lang="ts">
import { onMounted, ref } from 'vue'const emit = defineEmits(['update:marker-position', 'update:address'])// 定義響應式數據
const keyMap = ref('')
let map: any = null
let marker: any = null
let geoc: any = null// 更新標記位置和地址的函數
const updatePositionAndAddress = (point: any) => {// 發送位置更新事件emit('update:marker-position', {lat: point.lat,lng: point.lng})// 反向地理編碼獲取詳細地址geoc.getLocation(point, (rs: any) => {if (rs) {emit('update:address', rs.address)}})
}// 處理地圖點擊事件
const handleMapClick = (e: any) => {// 如果已有標注，則先移除if (marker) {map.removeOverlay(marker)}// 創建新的標注marker = new BMap.Marker(e.point)map.addOverlay(marker)// 更新位置和地址updatePositionAndAddress(e.point)
}// 搜索地址
const searchAddress = () => {if (!keyMap.value) return// 創建地址搜索實例const local = new BMap.LocalSearch(map, {renderOptions: { map: map },onSearchComplete: (results: any) => {if (results.getNumPois()) {const firstResult = results.getPoi(0)const point = firstResult.point// 移除舊標記if (marker) {map.removeOverlay(marker)}// 添加新標記marker = new BMap.Marker(point)map.addOverlay(marker)map.centerAndZoom(point, 15)// 更新位置和地址updatePositionAndAddress(point)}}})local.search(keyMap.value)
}// 初始化地圖
onMounted(() => {const BMap = window.BMapif (!BMap) {console.error('百度地圖 API 未正確加載，請檢查 API 密鑰和腳本鏈接')return}// 初始化地圖map = new BMap.Map('map-container')map.centerAndZoom(new BMap.Point(102.755, 25.134), 13)map.enableScrollWheelZoom()// 初始化地理編碼器geoc = new BMap.Geocoder()// 添加點擊事件監聽map.addEventListener('click', handleMapClick)
})
</script><style scoped>
/* 樣式部分 */
.map-container {width:600px;height: 500px;
}.result {margin-top: 10px;font-size: 14px;
}
</style>

1.5 使用?

#需要完成源碼加vx a2411286970a<BaiduMap ref="mapRef" @update:marker-position="handleMarkerPositionUpdate"@update:address="handleAddressUpdate"></BaiduMap>

#需要完成源碼加vx a2411286970a    
handleMarkerPositionUpdate(position){console.log(position);this.ruleForm.latitude=position.latthis.ruleForm.longitude=position.lng},

2.uinapp

我們在后臺進行位置獲取后，在前臺微信小程序及可進回顯導航即可！

			// 導航功能onNavigateTap() {// 檢查是否有地址信息if (!this.detail.jingdiandizhi) {this.$utils.msg('暫無地址信息');return;}let _this = this;uni.authorize({scope: 'scope.userLocation',success: () => {// 用戶已授權，獲取當前位置uni.getLocation({type: 'gcj02', // 返回可以用于uni.openLocation的經緯度success: (res) => {const latitude = res.latitude;const longitude = res.longitude;// 使用當前位置打開地圖uni.openLocation({latitude: parseFloat(this.detail.latitude),longitude:parseFloat(this.detail.longitude),name: this.detail.jingdianmingcheng,address: this.detail.jingdiandizhi,scale: 18,success: function() {console.log('成功打開位置');},fail: function(err) {console.error('打開位置失敗', err);}});},fail: function(err) {console.error('獲取位置失敗', err);}});},fail: () => {// 用戶未授權uni.showModal({title: '提示',content: '需要獲取您的位置權限，請前往設置開啟。',success: (res) => {if (res.confirm) {uni.openSetting();}}});}});// // 打開地圖導航// uni.openLocation({// 	latitude: 0, // 這里需要替換為實際的經緯度// 	longitude: 0, // 這里需要替換為實際的經緯度// 	name: this.detail.jingdianmingcheng,// 	address: this.detail.jingdiandizhi,// 	success: function() {// 		console.log('導航成功');// 	},// 	fail: function(err) {// 		console.log('導航失敗', err);// 		// 如果沒有經緯度，可以使用復制地址的方式// 		uni.setClipboardData({// 			data: this.detail.jingdiandizhi,// 			success: function() {// 				uni.showToast({// 					title: '地址已復制，請打開地圖APP進行導航',// 					icon: 'none'// 				});// 			}// 		});// 	}// });},

?