在微信小程序中实现简单的位置获取以及地图显示

首先你需要在页面上微信自带的腾讯地图控件

<view>
  //地图控件
  <map id="myMap" 
        //纬度
       :latitude="latitude" 
        //经度
       :longitude="longitude" 
        //地图区域显示，数字越大显示的越细节的城市，数字越小，显示的区域越大
       scale="16"
       show-location
       style="width: 100%; height: 1200rpx;">
  </map>
</view>

在对应的js文件中，你需要通过微信api获取你自己所在的位置经纬度，然后把位置经纬度动态的给到 latitude ，longitude，必须加上刷新地图控件这个东西，不加的话为导致，地图先渲染出来之后，视图区域看到的不是你现在所在的位置
    // 强制更新地图组件
    this.updateMap();

Page({
  data: {
    latitude: 39.9042, // 北京的默认纬度
    longitude: 116.4074, // 北京的默认经度
  },

  onLoad: function () {
    this.checkLocationPermission();
  },

  checkLocationPermission: function () {
    wx.getSetting({
      success: res => {
        if (!res.authSetting['scope.userLocation']) {
          this.requestLocationPermission();
        } else {
          this.getLocation();
        }
      }
    });
  },

  requestLocationPermission: function () {
    wx.authorize({
      scope: 'scope.userLocation',
      success: () => {
        this.getLocation();
      },
      fail: () => {
        wx.showModal({
          title: '提示',
          content: '需要获取您的位置，请允许授权',
          showCancel: false,
          confirmText: '去授权',
          success: function (res) {
            if (res.confirm) {
              wx.openSetting({
                success: data => {
                  if (data.authSetting['scope.userLocation']) {
                    this.getLocation();
                  } else {
                    wx.showToast({
                      title: '未授权位置信息',
                      icon: 'none'
                    });
                  }
                }
              });
            }
          }
        });
      }
    });
  },

  getLocation: function () {
    wx.getLocation({
      type: 'gcj02', // 返回可以用于 wx.openLocation 的经纬度
      success: function (res) {
        const { latitude, longitude } = res;
        console.log('当前位置:', latitude, longitude);
        this.showMap(latitude, longitude);
      }.bind(this),
      fail: err => {
        console.error('获取位置失败:', err);
      }
    });
  },

  showMap: function (latitude, longitude) {
    this.setData({
      latitude,
      longitude
    });

    // 强制更新地图组件
    this.updateMap();
  },

  updateMap: function () {
    const mapContext = wx.createMapContext('myMap');
    mapContext.moveToLocation();
  }
});