获取用户经纬度、用户手动选择地图位置

许多时候，我们需要获取用户位置信息（例：门店、生鲜配送）来根据用户具体位置提供服务，此时，我们就需要使用到微信小程序自带的API来获取用户经纬度；

开发前准备工作

小程序后台开启“位置服务”.png 腾讯地图开发平台申请key.png 项目中引用map.jsdk.png

一、获取用户经纬度 wx.getLocation(Object object)

<!-- test.wxml -->
<view class="position-data">
    <view class="title">定位参数——默认</view>
    <view class="li" wx:for="{{defaultsPosition}}" wx:key="index">{{index}} —— {{item}}</view>
</view>

/* test.js */
Page({
  data:{
    defaultsPosition: {},
  },
  onLoad:function(e){
      //获取用户位置
      wx.getLocation({
          type: 'gcj02',//wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
          success:(res) =>{
              console.log('纬度', res.latitude);
              console.log('经度', res.longitude);
              this.setData({
                  defaultsPosition: res,
              });
          }
      });
  },
});

/* test.wxss */
.position-data{
    box-sizing: border-box;
    border-radius: 10rpx;
    width: 690rpx;
    margin: 30rpx auto;
    border: 1px solid #eee;
    padding: 30rpx;
}
.position-data .title{
    padding: 0 30rpx;
}
.position-data .li{
    padding: 0 30rpx;
    margin: 30rpx auto;
    font-size: 20rpx;
    color: #999;
}

演示结果.png

二、使用经纬度坐标 解析为 位置文本 并 获取附近poi列表

如果需要将经纬度坐标转化为具体文本位置，可以调用第三方地图服务商提供的API实现，例如腾讯地图开放平台（参考“相关引用3”）

三、用户手动在地图上选择位置

当默认获取的用户经纬度坐标已不足以满足业务需求时，可以通过让用户手动选择地图上的某个地址，可以通过wx.chooseLocation(Object )来打开可以选择位置的地图。

<!-- test.wxml -->
<view class="position-data">
    <view class="title">定位参数——默认</view>
    <view class="li" wx:for="{{defaultsPosition}}" wx:key="index">{{index}} —— {{item}}</view>
</view>
<view class="position-data">
    <view class="title">定位参数——用户选择</view>
    <view class="li" wx:for="{{selectPosition}}"  wx:key="index">{{index}} —— {{item}}</view>
</view>
<button bindtap='getLocation' type="primary">选择位置</button>

/* test.js */
Page({
  data:{
    defaultsPosition: {},
    selectPosition: {},
  },
  onShow:function(e){
      wx.getLocation({
          type: 'gcj02',//wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
          success:(res) =>{
              console.log('纬度', res.latitude);
              console.log('经度', res.longitude);
              this.setData({
                  defaultsPosition: res,
              });
          }
      });
  },
  //获取位置
  getLocation(e) {
    //携带可能存在的经纬度参数
    let defaultsPosition = this.data.defaultsPosition || {};
    let selectPosition = this.data.selectPosition || {};
    if (!selectPosition.latitude && defaultsPosition.latitude){
      selectPosition = this.data.defaultsPosition;
    }
    //打开地图选择器
    wx.chooseLocation({
      latitude: selectPosition.latitude ? selectPosition.latitude: undefined,
      longitude: selectPosition.longitude ? selectPosition.longitude : undefined,
      success: (res)=>{
        console.log('选择地址回调',res);
        this.setData({
          selectPosition: res,
        })
      }
    })
  },
});

演示结果截图
1、未选择地址之前：

1、未选择地址之前.png
2、点击“选择位置”，跳转到“选择位置”界面，如果携带了经纬度坐标，则会以对应的坐标为地图中心，否则默认以用户当前位置为地图中心。
2、选择地址界面.png
3、用户可以选择一个其他任意位置
3、选择一个.png
4、用户点击确认后，返回上一页，并触发 wx.chooseLocation({})的success()函数
4.png

相关引用

1、获取用户经度纬度——wx.getLocation(Object)
2、用户手动选择地图位置——wx.chooseLocation(Object)
3、经纬度坐标转位置文本——逆地址解析(坐标位置描述)
4、小程序个性化地图——小程序开启地图之旅