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

最新推荐文章于 2025-08-01 18:13:42 发布

原创最新推荐文章于 2025-08-01 18:13:42 发布 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

本文介绍了如何在微信小程序中获取用户经纬度，包括使用微信内置的定位功能以及集成腾讯地图进行地图显示和标记点、画圈的功能。

先看效果图

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控制圈的半径