小程序地图获取当前位置

微信小程序JavaScript SDK | 腾讯位置服务

安装步骤安装 

小程序

<view class="section">
  <view class="section__title" bindtap="glocation">获取当前地址</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      当前选择：{{res}}      
    </view>
  </picker>
</view>
<map id="myMap"
    markers="{{markers}}"
    style="width:100%;height:300px;"
    longitude="{{poi.longitude}}"
    latitude="{{poi.latitude}}" scale='16' show-location>
</map>

var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
 
// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '配置自己的' 
}); 

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
    res:'',
    
  },
//地图上获取自己的位置
glocation(){
    var _this=this
    wx.getLocation({
      type: 'wgs84',
      success (res) {
        console.log(res)
        const latitude = res.latitude
        const longitude = res.longitude
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function(res) {//成功后的回调
            console.log(res);
            var res = res.result;
            var mks = [];
           
            //当get_poi为0时或者为不填默认值时，检索目标位置，按需使用
            mks.push({ // 获取返回结果，放到mks数组中
              title: res.address,
              id: 0,
              latitude: res.location.lat,
              longitude: res.location.lng,
              iconPath: './resources/placeholder.png',//图标路径
              width: 20,
              height: 20,
              callout: { //在markers上展示地址名称，根据需求是否需要
                content: res.address,
                color: '#000',
                display: 'ALWAYS'
              }
            });
            _this.setData({ //设置markers属性和地图位置poi，将结果在地图展示
              markers: mks,
              poi: {
                latitude: res.location.lat,
                longitude: res.location.lng
              },
              res:res.ad_info.city
            });
          },
        })
      }
     }) 
  },