微信小程序获取当前位置及地图选点功能 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序获取当前位置及地图选点功能

发表时间:2020-10-12

发布人:葵宇科技

浏览次数:76

标题小程序获取当前位置----逆地址解析----地图选点

实现功能:小程序首页定位当前城市类似于
某宝:在这里插入图片描述
某团:在这里插入图片描述

获取当前位置:

在小程序首页创建getLocation函数并在onLoad调用
首先需要引入腾讯位置服务的 微信小程序JavaScript SDK

1.申请开发者密钥(key):申请密钥
2.开通webserviceAPI服务:控制台 -> key管理 -> 设置(使用该功能的key)-> 勾选webserviceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)
3.下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.2 安全域名设置,在“设置” ->
4.“开发设置”中设置request合法域名,添加https://apis.map.qq.com

并在首页文件头部引入

var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');

getLocation:

  getLocation() {
    let _this = this
    wx.getLocation({  // 调用微信小程序的wx.getLocation获取当前的经纬度
      type: 'wgs84',
      success(res) {
        const latitude = res.latitude
        const longitude = res.longitude
        const key = ''; // 使用在腾讯位置服务申请的key
        // 实例化API核心类
        var qqmapsdk = new QQMapWX({
          key: key
        });
        // 逆地址解析
        qqmapsdk.reverseGeocoder({
          location: {
            latitude,
            longitude
          },
          success(res) {
            // console.log('getLocation: ', res.result)
            _this.setData({
              location: res.result.address_component.city
            })
          }
        })
      }
    })
  },

可以获取这么一堆数据
在这里插入图片描述
我们取其中的市级city

选择位置:

我们这里采用的是腾讯位置服务地图选点插件实现选择位置功能。
接入指引官网有详细讲解。
在文件头部引入:

const chooseLocation = requirePlugin('chooseLocation');

在点击首页城市选择区域时调用location()函数,因为页面加载时获取位置已经提示用户授权小程序的定位功能,这里调用wx.getSetting验证用户是否同意授权,如果同意则跳转地图选点页面,否则提示用户授权。
location()函数:

  // 定位
  location() {
    const key = ''; //使用在腾讯位置服务申请的key
    const referer = ''; //调用插件的app的名称
    // const category = '生活服务,娱乐休闲';
    const scale = 7;
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.userLocation']) {
          wx.authorize({
            scope: 'scope.userLocation',
            success() {
              // 用户已经同意小程序使用定位功能
              wx.navigateTo({
                url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&scale=${scale}`
              });
            },
            fail(err) {
              console.log(err)
              if (err.errMsg.indexOf('auth deny')) {
                // 用户拒绝定位授权
                Dialog.alert({
                  message: '您已拒绝地理位置授权,\n请在右上角设置打开',
                })
              }
            }
          })
        } else {
          wx.navigateTo({
            url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&scale=${scale}`
          });
        }
      }
    })
  },

获取位置信息:

如果用户选点完成,则在onShow里获取用户的选点结果对象。
大部分选点的返回结果都可以直接获取到city,但是某些选点不会直接返回city如:公交车站点等
在这里插入图片描述
此时就需再次调用逆地址解析来获取位置信息

    const location = chooseLocation.getLocation(); // 如果点击确认选点按钮,则返回选点结果对象,否则返回null
    // console.log('location:', location)
    if (location) {
      if (location.city) {
        this.setData({
          location: location.city
        })
      } else {
        const latitude = location.latitude
        const longitude = location.longitude
        const key = '';//	使用在腾讯位置服务申请的key
        // 实例化API核心类
        var qqmapsdk = new QQMapWX({
          key: key
        });
        // 逆地址解析
        qqmapsdk.reverseGeocoder({
          location: {
            latitude,
            longitude
          },
          success(res) {
            // console.log('getLocation: ', res.result)
            _this.setData({
              location: res.result.address_component.city
            })
          }
        })
      }
    }

最后记得页面卸载时设置插件选点数据为null,防止再次进入页面,geLocation返回的是上次选点结果

 onHide() {
    chooseLocation.setLocation(null);
  },

相关案例查看更多