图文并茂--微信小程序，获取用户地理位置信息，并调用腾讯地图API来获取用户具体位置

今天开始搞这个东西，下面是详细的记录

先看一下效果啦

1.小程序代码先获取用户基础位置信息

js

data: {

    myLocation: 'GET LOCATION',

      },

openMap() {

    var myThis = this

    wx.getLocation({

      type: 'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标

      success: function (res) {

        // success

        console.log('获取位置2');

        myThis.setData({

          myLocation: JSON.stringify(res)

        })

        console.log(res.latitude);

        console.log(res.longitude);

        wx.openLocation({

          latitude: res.latitude, // 纬度，范围为-90~90，负数表示南纬

          longitude: res.longitude, // 经度，范围为-180~180，负数表示西经

          scale: 28, // 缩放比例

          name: "要找的地方名字（某某饭店）",

          address: "地址：要去的地点详细描述"

        })

      }

    })

  },

openMap1() {

    var myThis = this

    wx.getLocation({

      type: 'wgs84',

      success(res) {

        // 纬度，范围为 -90~90，负数表示南纬

        const latitude = res.latitude

        // 经度，范围为 -180~180，负数表示西经

        const longitude = res.longitude

        // 速度，单位 m/s

        const speed = res.speed

        // 位置的精确度，反应与真实位置之间的接近程度，可以理解成10即与真实位置相差10m，越小越精确

        const accuracy = res.accuracy

        myThis.setData({

          myLocation: '当前经度：' + latitude + '\n' + '当前纬度：' + longitude + '\n' + '当前速度：' + speed + '\n' + '当前位置精确度：' + accuracy

        })

        console.log(res.latitude);

        console.log(res.longitude);

      }

    })

  },

html

 <button type="default" bindtap="openMap">点击打开地图</button>

 <button type="default" bindtap="openMap1">点击获取我的位置</button>

 <text >{{myLocation}}</text>

app.json

"pages": [

        "pages/index/index"

    ],

 "permission": {

        "scope.userLocation": {

            "desc": "你的位置信息将用于小程序位置接口的效果展示"

        }

    },

巴特西

图文并茂--微信小程序，获取用户地理位置信息，并调用腾讯地图API来获取用户具体位置

今天开始搞这个东西，下面是详细的记录

先看一下效果啦

1.小程序代码先获取用户基础位置信息

js

html

app.json

下面开始调用腾讯地图API进行解析我们的经纬度

注册账号

创建应用，获取KEY,

发请求进行经纬度解析

JS

最新文章

热门文章