uniapp+微信小步伐+地图+传入多个标记点显示+点击打开内置地图导航+完整代 ...

 一、结果展示

二、完整代码

1. <template>
2.         <view class="container">
3.                 <map class="map-container" :latitude="latitude" :longitude="longitude"
4.                         :markers="markers" :controls="controls" show-location
5.                         @markertap="onMarkerTap">
6.                 </map>
7.         </view>
8. </template>
10. <script>
11. export default {
12.         data() {
13.                 return {
14.                         latitude: 34.341568, // 默认中心点（西安）
15.                         longitude: 108.940174,
16.                         // 标记点（多个位置）
17.                         markers: [
18.                                 {
19.                                         id: 1,
20.                                         latitude: 34.341568,
21.                                         longitude: 108.940174,
22.                                         title: "",
23.                                         iconPath: "/static/location.png", // 标记点图标
24.                                         width: 30,
25.                                         height: 30,
26.                                         callout: {
27.                                                 content: "点击导航",
28.                                                 color: "#ffffff",
29.                                                 fontSize: 14,
30.                                                 borderRadius: 10,
31.                                                 bgColor: "#000000",
32.                                                 padding: 8,
33.                                                 display: "ALWAYS"
34.                                         }
35.                                 },
36.                                 {
37.                                         id: 2,
38.                                         latitude: 34.250568,
39.                                         longitude: 108.950174,
40.                                         title: "",
41.                                         iconPath: "/static/location.png",
42.                                         width: 30,
43.                                         height: 30,
44.                                         callout: {
45.                                                 content: "点击导航",
46.                                                 color: "#ffffff",
47.                                                 fontSize: 14,
48.                                                 borderRadius: 10,
49.                                                 bgColor: "#000000",
50.                                                 padding: 8,
51.                                                 display: "ALWAYS"
52.                                         }
53.                                 }
54.                         ]
55.                 };
56.         },
57.         methods: {
58.                 // 点击标记点触发导航
59.                 onMarkerTap(e) {
60.                         const marker = this.markers.find(m => m.id === e.markerId);
61.                         if (marker) {
62.                                 uni.openLocation({
63.                                         latitude: marker.latitude,
64.                                         longitude: marker.longitude,
65.                                         name: marker.title,
66.                                         address: marker.title,
67.                                         scale: 18
68.                                 });
69.                         }
70.                 }
71.         }
72. };
73. </script>
75. <style>
76. .container {
77.         width: 100vw;
78.         height: 100vh;
79.         overflow: hidden;
80. }
82. .map-container {
83.         width: 100%;
84.         height: 100%;
85.         position: absolute;
86.         top: 0;
87.         left: 0;
88. }
89. </style>

复制代码

三、代码表明 

   整体说一下就是map直接组件就显示地图，marker就是标记点传进来显示，uni.openLocation这个就是打开手机内置地图然后选择你的地图就能正常导航过去

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