uniapp舆图导航及后台百度舆图回显(v2/v3版本)

百度舆图申请地点：控制台 | 百度舆图开放平台
结果：

1.后台

1.1申请百度舆图APi

1.2 引入百度舆图

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

复制代码

1.3 v2组件

1. <template>
2.   <div>
3.     <!-- 地图容器 -->
4.     <div id="map-container" class="map-container"></div>
5.     <!-- 结果展示区域 -->
6.     <div class="result">
7.       搜索：<el-input v-model="keyMap" placeholder="请输入地址" size="small" clearable></el-input>
8.       <el-button type="primary" size="small" @click="searchAddress">搜索</el-button>
9.     </div>
10.   </div>
11. </template>
13. <script>
14. export default {
15.   data() {
16.     return {
17.       keyMap: '',
18.       map: null,
19.       marker: null,
20.       geoc: null
21.     };
22.   },
23.   methods: {
24.     updatePositionAndAddress(point) {
25.       this.$emit('update:marker-position', {
26.         lat: point.lat,
27.         lng: point.lng
28.       });
29.       this.geoc.getLocation(point, (rs) => {
30.         if (rs) {
31.           this.$emit('update:address', rs.address);
32.         }
33.       });
34.     },
35.     handleMapClick(e) {
36.       if (this.marker) {
37.         this.map.removeOverlay(this.marker);
38.       }
39.       this.marker = new BMap.Marker(e.point);
40.       this.map.addOverlay(this.marker);
41.       this.updatePositionAndAddress(e.point);
42.     },
43.     searchAddress() {
44.       if (!this.keyMap) return;
45.       const local = new BMap.LocalSearch(this.map, {
46.         renderOptions: { map: this.map },
47.         onSearchComplete: (results) => {
48.           if (results.getNumPois()) {
49.             const firstResult = results.getPoi(0);
50.             const point = firstResult.point;
51.             if (this.marker) {
52.               this.map.removeOverlay(this.marker);
53.             }
54.             this.marker = new BMap.Marker(point);
55.             this.map.addOverlay(this.marker);
56.             this.map.centerAndZoom(point, 15);
57.             this.updatePositionAndAddress(point);
58.           }
59.         }
60.       });
61.       local.search(this.keyMap);
62.     }
63.   },
64.   mounted() {
65.     if (!window.BMap) {
66.       console.error('百度地图 API 未正确加载，请检查 API 密钥和脚本链接');
67.       return;
68.     }
69.     this.map = new BMap.Map('map-container');
70.     this.map.centerAndZoom(new BMap.Point(102.755, 25.134), 13);
71.     this.map.enableScrollWheelZoom();
72.     this.geoc = new BMap.Geocoder();
73.     this.map.addEventListener('click', this.handleMapClick);
74.   }
75. };
76. </script>
78. <style scoped>
79. .map-container {
80.   width: 600px;
81.   height: 500px;
82. }
84. .result {
85.   margin-top: 10px;
86.   font-size: 14px;
87. }
88. </style>

复制代码

1.4 v3组件

1. <template>
2.         <div>
3.                 <!-- 地图容器 -->
4.                 <div id="map-container" class="map-container"></div>
5.                 <!-- 结果展示区域 -->
6.                 <div class="result">
7.                         搜索：<el-input v-model="keyMap" placeholder="请输入地址" size="small" clearable></el-input>
8.                         <el-button type="primary" size="small" @click="searchAddress">搜索</el-button>
9.                 </div>
10.         </div>
11. </template>
13. <script setup lang="ts">
14. import { onMounted, ref } from 'vue'
16. const emit = defineEmits(['update:marker-position', 'update:address'])
18. // 定义响应式数据
19. const keyMap = ref('')
20. let map: any = null
21. let marker: any = null
22. let geoc: any = null
24. // 更新标记位置和地址的函数
25. const updatePositionAndAddress = (point: any) => {
26.         // 发送位置更新事件
27.         emit('update:marker-position', {
28.                 lat: point.lat,
29.                 lng: point.lng
30.         })
32.         // 反向地理编码获取详细地址
33.         geoc.getLocation(point, (rs: any) => {
34.                 if (rs) {
35.                         emit('update:address', rs.address)
36.                 }
37.         })
38. }
40. // 处理地图点击事件
41. const handleMapClick = (e: any) => {
42.         // 如果已有标注，则先移除
43.         if (marker) {
44.                 map.removeOverlay(marker)
45.         }
47.         // 创建新的标注
48.         marker = new BMap.Marker(e.point)
49.         map.addOverlay(marker)
51.         // 更新位置和地址
52.         updatePositionAndAddress(e.point)
53. }
55. // 搜索地址
56. const searchAddress = () => {
57.         if (!keyMap.value) return
59.         // 创建地址搜索实例
60.         const local = new BMap.LocalSearch(map, {
61.                 renderOptions: { map: map },
62.                 onSearchComplete: (results: any) => {
63.                         if (results.getNumPois()) {
64.                                 const firstResult = results.getPoi(0)
65.                                 const point = firstResult.point
66.                                
67.                                 // 移除旧标记
68.                                 if (marker) {
69.                                         map.removeOverlay(marker)
70.                                 }
72.                                 // 添加新标记
73.                                 marker = new BMap.Marker(point)
74.                                 map.addOverlay(marker)
75.                                 map.centerAndZoom(point, 15)
77.                                 // 更新位置和地址
78.                                 updatePositionAndAddress(point)
79.                         }
80.                 }
81.         })
83.         local.search(keyMap.value)
84. }
86. // 初始化地图
87. onMounted(() => {
88.         const BMap = window.BMap
89.         if (!BMap) {
90.                 console.error('百度地图 API 未正确加载，请检查 API 密钥和脚本链接')
91.                 return
92.         }
94.         // 初始化地图
95.         map = new BMap.Map('map-container')
96.         map.centerAndZoom(new BMap.Point(102.755, 25.134), 13)
97.         map.enableScrollWheelZoom()
98.        
99.         // 初始化地理编码器
100.         geoc = new BMap.Geocoder()
102.         // 添加点击事件监听
103.         map.addEventListener('click', handleMapClick)
104. })
105. </script>
107. <style scoped>
108. /* 样式部分 */
109. .map-container {
110.         width:600px;
111.         height: 500px;
112. }
114. .result {
115.         margin-top: 10px;
116.         font-size: 14px;
117. }
118. </style>

复制代码

1.5 利用 

1. #需要完成源码加vx a2411286970a
2.     <BaiduMap ref="mapRef"
3. @update:marker-position="handleMarkerPositionUpdate"
4. @update:address="handleAddressUpdate"></BaiduMap>

复制代码

1. #需要完成源码加vx a2411286970a   
2. handleMarkerPositionUpdate(position){
3.      console.log(position);
4.      this.ruleForm.latitude=position.lat
5.      this.ruleForm.longitude=position.lng
6.     },

复制代码

2.uinapp

我们在后台举行位置获取后，在前台微信小步伐及可进回显导航即可！

1.                         // 导航功能
2.                         onNavigateTap() {
3.                                 // 检查是否有地址信息
4.                                 if (!this.detail.jingdiandizhi) {
5.                                         this.$utils.msg('暂无地址信息');
6.                                         return;
7.                                 }
8.                                         let _this = this;
9.                                 uni.authorize({
10.                                         scope: 'scope.userLocation',
11.                                         success: () => {
12.                                                 // 用户已授权，获取当前位置
13.                                                 uni.getLocation({
14.                                                         type: 'gcj02', // 返回可以用于uni.openLocation的经纬度
15.                                                         success: (res) => {
16.                                                                 const latitude = res.latitude;
17.                                                                 const longitude = res.longitude;
18.                                                                 // 使用当前位置打开地图
19.                                                                 uni.openLocation({
20.                                                                         latitude: parseFloat(this.detail.latitude),
21.                                                                         longitude:parseFloat(this.detail.longitude),
22.                                                                         name: this.detail.jingdianmingcheng,
23.                                                                         address: this.detail.jingdiandizhi,
24.                                                                         scale: 18,
25.                                                                         success: function() {
26.                                                                                 console.log('成功打开位置');
27.                                                                         },
28.                                                                         fail: function(err) {
29.                                                                                 console.error('打开位置失败', err);
30.                                                                         }
31.                                                                 });
32.                                                         },
33.                                                         fail: function(err) {
34.                                                                 console.error('获取位置失败', err);
35.                                                         }
36.                                                 });
37.                                         },
38.                                         fail: () => {
39.                                                 // 用户未授权
40.                                                 uni.showModal({
41.                                                         title: '提示',
42.                                                         content: '需要获取您的位置权限，请前往设置开启。',
43.                                                         success: (res) => {
44.                                                                 if (res.confirm) {
45.                                                                         uni.openSetting();
46.                                                                 }
47.                                                         }
48.                                                 });
49.                                         }
50.                                 });
51.                                
52.                                 // // 打开地图导航
53.                                 // uni.openLocation({
54.                                 //         latitude: 0, // 这里需要替换为实际的经纬度
55.                                 //         longitude: 0, // 这里需要替换为实际的经纬度
56.                                 //         name: this.detail.jingdianmingcheng,
57.                                 //         address: this.detail.jingdiandizhi,
58.                                 //         success: function() {
59.                                 //                 console.log('导航成功');
60.                                 //         },
61.                                 //         fail: function(err) {
62.                                 //                 console.log('导航失败', err);
63.                                 //                 // 如果没有经纬度，可以使用复制地址的方式
64.                                 //                 uni.setClipboardData({
65.                                 //                         data: this.detail.jingdiandizhi,
66.                                 //                         success: function() {
67.                                 //                                 uni.showToast({
68.                                 //                                         title: '地址已复制，请打开地图APP进行导航',
69.                                 //                                         icon: 'none'
70.                                 //                                 });
71.                                 //                         }
72.                                 //                 });
73.                                 //         }
74.                                 // });
75.                         },

复制代码

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。