Przeglądaj źródła

sport-home page

邹能昇 4 miesięcy temu
rodzic
commit
d064cd07c0

+ 90 - 19
nova-werun/pages/home/sport/sport-home/index.js

@@ -15,30 +15,36 @@ Page({
         contentpadding: 0, //顶部padding高度
         //
         active: 0,
+        //地图
+        longitude: 0,
+        latitude: 0,
+        markers: [],
     },
 
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
-                // 计算
-                const systemInfo = wx.getSystemInfoSync();
-                const statusBarHeight = systemInfo.statusBarHeight || 0;
-                const screenHeight = systemInfo.screenHeight || 0;
-                const custom = wx.getMenuButtonBoundingClientRect();
-                const customHeight = custom.height + 10 + 2 || 0;
-                const bottomNavHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom || 0;
-        
-                const contentpadding = (statusBarHeight + customHeight) * 750 / systemInfo.windowWidth;
-                const contentHeight = (screenHeight - bottomNavHeight - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
-                this.setData({
-                    statusBarHeight,
-                    screenHeight,
-                    customHeight,
-                    bottomNavHeight,
-                    contentpadding,
-                    contentHeight
-                });
+        // 计算
+        const systemInfo = wx.getSystemInfoSync();
+        const statusBarHeight = systemInfo.statusBarHeight || 0;
+        const screenHeight = systemInfo.screenHeight || 0;
+        const custom = wx.getMenuButtonBoundingClientRect();
+        const customHeight = custom.height + 10 + 2 || 0;
+        const bottomNavHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom || 0;
+
+        const contentpadding = (statusBarHeight + customHeight) * 750 / systemInfo.windowWidth;
+        const contentHeight = (screenHeight - bottomNavHeight - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
+        this.setData({
+            statusBarHeight,
+            screenHeight,
+            customHeight,
+            bottomNavHeight,
+            contentpadding,
+            contentHeight
+        });
+        //地图
+        this.Getlocation()
     },
 
     /**
@@ -88,5 +94,70 @@ Page({
      */
     onShareAppMessage: function () {
 
-    }
+    },
+    //获取当前位置信息
+    Getlocation() {
+        // 获取当前位置信息
+        wx.getLocation({
+            type: 'wgs84',
+            success: (res) => {
+                const {
+                    latitude,
+                    longitude
+                } = res;
+                console.log('获取到的经纬度:', latitude, longitude); // 添加日志
+                //调用api解析地址
+                wx.request({
+                    url: 'https://api.map.baidu.com/reverse_geocoding/v3/?ak=sHZTomd7grslfP7sPKB8tRgT49FK9TEu&output=json&coordtype=gcj02&location=' + latitude + ',' + longitude,
+                    data: {},
+                    header: {
+                        'Content-Type': 'application/json'
+                    },
+                    success: (ops) => { // 使用箭头函数
+                        console.log(ops);
+                        const address = ops.data.result.formatted_address;
+                        this.setData({
+                            address: address,
+                            latitude: latitude, // 保证 latitude 被设置
+                            longitude: longitude, // 保证 longitude 被设置
+                            markers: [{ // 设置 markers
+                                id: 1,
+                                latitude: latitude,
+                                longitude: longitude,
+                                iconPath: 'https://file-cloud.fmode.cn/13WZ0W7u3l/20240724/7ebg0k104325941.png?imageView2/1/w/200/h/200', // 自定义标记图标
+                                width: 40,
+                                height: 40,
+                                callout: {
+                                    content: address, // 可以显示解析出的地址
+                                    color: '#ffffff',
+                                    bgColor: '#7F56B2',
+                                    padding: 10,
+                                    borderRadius: 5,
+                                    display: 'ALWAYS'
+                                }
+                            }]
+                        });
+                        console.log(this.data.address);
+                    },
+                    fail: function (resq) {
+                        wx.showModal({
+                            title: '信息提示',
+                            content: '请求失败',
+                            showCancel: false,
+                            confirmColor: '#f37938'
+                        });
+                    },
+                    complete: function () {}
+                })
+
+            },
+            fail: (err) => {
+                console.error(err);
+                wx.showToast({
+                    title: '获取位置失败',
+                    icon: 'none'
+                });
+            }
+        });
+    },
 })

+ 7 - 0
nova-werun/pages/home/sport/sport-home/index.json

@@ -2,5 +2,12 @@
   "usingComponents": {
     "van-tab": "@vant/weapp/tab/index",
     "van-tabs": "@vant/weapp/tabs/index"
+  },
+  "permission": {
+    "scope": {
+      "location": {
+        "desc": "您的位置信息将用于展示地图"
+      }
+    }
   }
 }

+ 4 - 0
nova-werun/pages/home/sport/sport-home/index.less

@@ -33,6 +33,10 @@
         position: relative;
         margin-top: 30rpx;
         margin-bottom: 40rpx;
+        .map{
+            width:  100%;
+            height: 100%;
+        }
         .button{
             width: 150rpx;
             height: 150rpx;

+ 15 - 11
nova-werun/pages/home/sport/sport-home/index.wxml

@@ -1,28 +1,32 @@
 <!--nova-werun/pages/home/sport/sport-home/index.wxml-->
 <nav type="back" title="运动" background-color="{{'#87ceeb'}}" front-color="{{'#ffffff'}}"></nav>
 <view class="all" style="height: {{contentHeight}}rpx;">
-<!-- 走路 -->
-    <van-tabs tab-class='tab' active="{{ active }}"  color='#87ceeb' title-active-color='#87ceeb' title-inactive-color='black'>
+    <!-- 走路 -->
+    <van-tabs tab-class='tab' active="{{ active }}" color='#87ceeb' title-active-color='#87ceeb' title-inactive-color='black'>
         <van-tab title="步行">
             <view class="textbox">
                 <view class="text">今日积累行走</view>
                 <view class="number">7公里 ></view>
             </view>
             <view class="mapbox">
-                <view></view>
+                <view class="map">
+                    <map class="map" enable-zoom="ture" enable-scroll="ture" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="18" markers="{{markers}}"></map>
+                </view>
                 <view class="button">GO</view>
             </view>
         </van-tab>
         <!-- 跑步 -->
         <van-tab title="跑步">
-                <view class="textbox">
-                    <view class="text">今日积累跑步</view>
-                    <view class="number">10公里 ></view>
-                </view>
-                <view class="mapbox">
-                    <view></view>
-                    <view class="button">GO</view>
+            <view class="textbox">
+                <view class="text">今日积累跑步</view>
+                <view class="number">10公里 ></view>
+            </view>
+            <view class="mapbox">
+                <view class="map">
+                    <map class="map" enable-zoom="ture" enable-scroll="ture" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="18" markers="{{markers}}"></map>
                 </view>
-            </van-tab>
+                <view class="button">GO</view>
+            </view>
+        </van-tab>
     </van-tabs>
 </view>

+ 1 - 1
nova-werun/pages/home/sport/sport-home/index.wxss

@@ -1 +1 @@
-.all{width:100vw;padding-left:40rpx;padding-right:40rpx;padding-top:20rpx}.all .tab{font-size:40rpx}.all .textbox{width:100%;height:80rpx;border-radius:40rpx;border:solid black 1px;display:flex;align-items:center;margin-top:40rpx}.all .textbox .text{font-size:30rpx;margin-left:20rpx}.all .textbox .number{font-size:32rpx;margin-left:auto;margin-right:20rpx}.all .mapbox{width:100%;height:1100rpx;border-radius:15rpx;border:solid black 1px;position:relative;margin-top:30rpx;margin-bottom:40rpx}.all .mapbox .button{width:150rpx;height:150rpx;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:40rpx;background-color:orange;color:white;position:absolute;left:38%;bottom:100rpx}
+.all{width:100vw;padding-left:40rpx;padding-right:40rpx;padding-top:20rpx}.all .tab{font-size:40rpx}.all .textbox{width:100%;height:80rpx;border-radius:40rpx;border:solid black 1px;display:flex;align-items:center;margin-top:40rpx}.all .textbox .text{font-size:30rpx;margin-left:20rpx}.all .textbox .number{font-size:32rpx;margin-left:auto;margin-right:20rpx}.all .mapbox{width:100%;height:1100rpx;border-radius:15rpx;border:solid black 1px;position:relative;margin-top:30rpx;margin-bottom:40rpx}.all .mapbox .map{width:100%;height:100%}.all .mapbox .button{width:150rpx;height:150rpx;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:40rpx;background-color:orange;color:white;position:absolute;left:38%;bottom:100rpx}