添加地图功能

app.json

@@ -37,6 +37,12 @@
       }
     ]
   },
+  "requiredPrivateInfos": ["getLocation"],
+  "permission": {
+    "scope.userLocation": {
+      "desc": "你的位置信息将用于获取当前位置并在地图上显示"
+    }
+  },
   "componentFramework": "glass-easel",
   "sitemapLocation": "sitemap.json",
   "lazyCodeLoading": "requiredComponents"

pages/mine/mine.js

@@ -1,66 +1,113 @@
-// pages/mine/mine.js
 Page({
-
-  /**
-   * 页面的初始数据
-   */
   data: {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad(options) {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow() {
-
+    // 地图初始中心点（默认北京天安门）
+    latitude: 39.909,
+    longitude: 116.397,
+    scale: 16,
+    markers: [],
+    currentAddress: '点击下方按钮获取当前位置',
+    amapKey: 'b7cf2e80f99e2fbb46fa172ef62e71a0' // 替换为你申请的高德地图API Key
   },
 
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide() {
-
+  onLoad: function(options) {
+    // 页面加载时不自动获取位置，等待用户点击按钮
   },
 
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-
+  // 获取当前位置
+  getCurrentLocation: function() {
+    const that = this;
+    
+    // 使用微信原生API获取位置
+    wx.getLocation({
+      type: 'gcj02', // 国内一般使用gcj02坐标系
+      success: function(res) {
+        const latitude = res.latitude;
+        const longitude = res.longitude;
+        console.log('获取到的真实位置:', latitude, longitude); // 调试用
+        
+        // 更新地图中心点
+        that.setData({
+          latitude: latitude,
+          longitude: longitude
+        });
+        
+        // 根据坐标获取地址信息
+        that.getAddressByCoordinate(latitude, longitude);
+        
+        // 添加当前位置标记（使用定位图标）
+        that.addMarker(latitude, longitude, '我的位置');
+      },
+      fail: function(err) {
+        console.error('获取位置失败', err);
+        wx.showModal({
+          title: '提示',
+          content: '无法获取您的位置，请检查是否授权位置权限',
+          showCancel: false
+        });
+      }
+    });
   },
 
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-
+  // 根据坐标获取地址信息（使用高德地图API）
+  getAddressByCoordinate: function(lat, lng) {
+    const that = this;
+    const url = `https://restapi.amap.com/v3/geocode/regeo`;
+    
+    wx.request({
+      url: url,
+      data: {
+        key: this.data.amapKey,
+        location: `${lng},${lat}`,
+        extensions: 'all'
+      },
+      method: 'GET',
+      success: function(res) {
+        if (res.data.status === '1' && res.data.regeocode) {
+          const address = res.data.regeocode.formatted_address || '未知位置';
+          that.setData({
+            currentAddress: address
+          });
+        } else {
+          that.setData({
+            currentAddress: '获取地址信息失败'
+          });
+        }
+      },
+      fail: function(err) {
+        console.error('获取地址失败', err);
+        that.setData({
+          currentAddress: '网络错误，无法获取地址'
+        });
+      }
+    });
   },
 
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
+  // 添加标记点
+  addMarker: function(lat, lng, title) {
+    const newMarker = {
+      id: Date.now(),
+      latitude: lat,
+      longitude: lng,
+      title: title,
+      iconPath:'../../img/location.png', // 使用定位图标，如果不存在可以用系统默认图标
+      width: 30,
+      height: 30,
+      rotate: 0,
+      alpha: 1,
+      callout: {
+        content: title,
+        display: 'ALWAYS',
+        padding: 8,
+        borderRadius: 4,
+        bgColor: '#ffffff',
+        color: '#000000',
+        fontSize: 12,
+        boxShadow: '0 2rpx 4rpx rgba(0, 0, 0, 0.2)'
+      }
+    };
+    
+    this.setData({
+      markers: [newMarker] // 只保留当前位置标记
+    });
   }
-})
+});

pages/mine/mine.json

@@ -1,3 +1,4 @@
 {
+  "navigationBarTitleText": "地图定位",
   "usingComponents": {}
 }

pages/mine/mine.wxml

@@ -1,2 +1,14 @@
-<!--pages/mine/mine.wxml-->
-<text>pages/mine/mine.wxml</text>
+<view class="container">
+  <!-- 地图组件 - 占满全屏 -->
+  <map 
+    id="myMap" 
+    longitude="{{longitude}}" 
+    latitude="{{latitude}}"
+    scale="{{scale}}"
+    markers="{{markers}}"
+    style="width: 100%; height: 100%;">
+  </map>
+  
+  <!-- 悬浮定位按钮 -->
+  <button class="locate-btn" bindtap="getCurrentLocation">定位当前位置</button>
+</view>

pages/mine/mine.wxss

@@ -1 +1,19 @@
-/* pages/mine/mine.wxss */
+.container{
+  padding: 0;
+}
+.locate-btn {
+  position: absolute;
+  bottom: 40rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 999;
+  padding: 20rpx 40rpx;
+  background-color: #007aff;
+  color: white;
+  border-radius: 10rpx;
+  border: none;
+  font-size: 32rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
+  min-width: 200rpx;
+  text-align: center;
+}