uniapp 自界说地图组件（根据经纬度展示地图地理位置） ...

目次
一、界说组件（pages/compoent/diy/mapDiy.vue）
二、父页面引入子组件

---

一、界说组件（pages/compoent/diy/mapDiy.vue）

1. <template>
2.         <view class="diy-map" :style="{padding: paddingTop + ' ' + paddingLeft, background: showStyle.background, borderRadius: itemBorderRadius}">
3.                 <map class="map" :latitude="showParams.latitude" :longitude="showParams.longitude" :style="{height: height}" @click="onClick"></map>
4.         </view>
5. </template>
7. <script>
8.         export default {
9.                 name: 'mapDiy',
10.                 props: ['showStyle', 'showParams'],
11.                 computed: {
12.                         itemBorderRadius() {
13.                                 return uni.upx2px(this.showStyle.itemBorderRadius * 2) + 'px';
14.                         },
15.                         height() {
16.                                 return uni.upx2px(this.showStyle.height * 2) + 'px';
17.                         },
18.                         paddingTop() {
19.                                 return uni.upx2px(this.showStyle.paddingTop * 2) + 'px';
20.                         },
21.                         paddingLeft() {
22.                                 return uni.upx2px(this.showStyle.paddingLeft * 2) + 'px';
23.                         },
24.                 },
25.                 methods: {
26.                         // 点击事件
27.                         onClick() {
28.                                 uni.openLocation({
29.                                         latitude: parseFloat(this.showParams.latitude),
30.                                         longitude: parseFloat(this.showParams.longitude),
31.                                 });
32.                         }
33.                 }
34.         }
35. </script>
37. <style lang="scss">
38.         .diy-map .map {
39.                 width: 100%;
40.         }
41. </style>

复制代码

二、父页面引入子组件

•   写一个按钮获取当前地理位置
  

1.         
2.        <!-- 获取当前位置按钮 -->
3.         <button @click="getCurrentLocation">获取当前位置</button>
5.         <!-- 地图展示区域 -->
6.         <map-diy v-if="showMap" :showParams="mapParams" :showStyle="mapStyle"></map-diy>

复制代码

•  引入组件
  

2. import mapDiy from "@/pages/component/diy/mapDiy.vue";
3. export default {
4.   components: {
5.     articleItem,
6.     mapDiy,
7.   },
8.   data() {
9.     return {
10.       showMap: false, // 是否显示地图
11.       mapParams: { latitude: '', longitude: '' }, // 地图的经纬度参数
12.       mapStyle: { height: 300, background: '#fff', paddingTop: 10,itemBorderRadius: 8 } // 地图样式
13.     };
14.   },
15. methods: {
16.      // 获取当前位置信息并显示地图
17.      getCurrentLocation() {
18.       wx.getLocation({
19.         type: 'wgs84', // 获取GPS定位的经纬度
20.         success: (res) => {
21.           const latitude = res.latitude;
22.           const longitude = res.longitude;
24.           // 更新地图参数并显示地图
25.           this.mapParams = { latitude, longitude };
26.           this.showMap = true; // 显示地图
27.         },
28.         fail: (error) => {
29.           wx.showToast({
30.             title: '无法获取位置，请检查权限',
31.             icon: 'none'
32.           });
33.         }
34.       });
35.     },

复制代码

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