微信小程序使用获取经纬度和腾讯地图的使用

先看效果图

1、微信小程序获取经纬度

        1、获取接口权限 官方地址

        

        2、页面使用

    //打开提示框
    wx.showLoading({
      title: '正在定位中',
      mask: true
    });
    wx.getLocation({
      type: 'gcj02', //wgs84 返回 gps 坐标，gcj02 
      altitude: false, //传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接
      isHighAccuracy: false, //开启高精度定位
      highAccuracyExpireTime: 3000, //高精度定位超时时间(ms)，3000ms以上定位才有效果
      success(res) {
        //隐藏提示框
        wx.hideLoading();

        let location = {};
        location.horizontalAccuracy = res.horizontalAccuracy;
        location.latitude = parseFloat(res.latitude);
        location.longitude = parseFloat(res.longitude);
        //更新定位信息
        that.setData({
          horizontalAccuracy: res.horizontalAccuracy,
          latitude: parseFloat(res.latitude), //纬度，范围为 -90~90，负数表示南纬 
          longitude: parseFloat(res.longitude), //经度，范围为 -180~180，负数表示西经 
        })
        wx.setStorageSync('storage_location', location)
        // console.log('存储成功',location);
      },
      fail: function (res) {
        console.log(res)
        //隐藏提示框
        wx.hideLoading();
        wx.showToast({
          title: "定位失败"+res.errMsg,
          duration: 2000,
          icon: 'none'
        });
      }
    })

 2、小程序使用腾讯地图

        官方地址

<map id="myMap" style="width:100%; height:380rpx;" longitude="{{longitude}}" latitude="{{latitude}}" show-location="true" scale="16" markers="{{markers}}" circles="{{circles}}" enable-rotate="true">

地图标点

//地图画圈
    markers: [{
      id: 0,
      latitude: '',
      longitude: '',
      width: 32,
      height: 45
    }]
//id是唯一标识，经度维度控制标点位置,标记点可以有多个

 

地图画圈

circles: [{
      latitude: '',
      longitude: '',
      color: '#3197ed',
      fillColor: '#88bff388',
      radius: 40,
      strokeWidth: 1,
    }]
//经度维度控制圈的位置,圈可以有多个，radius控制圈的半径