您当前的位置: 首页 >  微信小程序

彭世瑜

暂无认证

  • 5浏览

    0关注

    2791博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

微信小程序:通过腾讯地图获取用户地理位置信息及其行政区域代码

彭世瑜 发布时间:2021-12-01 13:23:12 ,浏览量:5

文档:

  • wx.getLocation(Object object) 获取当前的地理位置、速度
  • 腾讯位置服务 微信小程序JavaScript SDK
一、获取接口权限

根据腾讯地图文档需要完成以下几个步骤:

1、创建应用: https://lbs.qq.com/dev/console/application/mine

  • 申请开发者密钥(key)
  • 填写微信小程序授权 APP ID
  • 勾选WebserviceAPI 域名白名单

2、下载微信小程序JavaScriptSDK(如果地址失效请到官网下载)

https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip 解压后放在目录

libs/qqmap-wx-jssdk.js

3、微信小程序后台添加安全域名:https://apis.map.qq.com

二、使用

单独提取出功能函数 utils/qq-map.js

/**
 * 腾讯地图 微信小程序JS API
 * https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
 */

import QQMapWX from '../libs/qqmap-wx-jssdk.js';

// 申请开发者密钥(key)
const QQMAP_KEY = 'xxx';

const qqmapsdk = new QQMapWX({
  key: QQMAP_KEY,
});

/**
 * 逆地址解析(坐标位置描述)
 * options: {location: {latitude: 纬度, longitude: 经度}}
 */
export function reverseGeocoder(options) {
  return new Promise((resolve, reject) => {
    qqmapsdk.reverseGeocoder({
      ...options,
      success: resolve,
      fail: reject,
    });
  });
}

使用 pages/index/index.js

import { reverseGeocoder } from '../../utils/qq-map.js';

async getIpInfo() {
    // 1、通过微信小程序获取当前位置坐标,需要用户点击授权按钮
    const locationRes = await wx.getLocation({
      type: 'wgs84',
    });

    console.log(locationRes);
	
    if (locationRes.errMsg == 'getLocation:ok') {
      // 2、根据坐标获取位置的详细信息
      const reverseRes = await reverseGeocoder({
	      location: {
	        latitude: locationRes.latitude,
	        longitude: locationRes.longitude,
	      }
      });
      
      console.log(reverseRes);
      // 行政区域码
      let locationCode = reverseRes.result.ad_info.adcode;
    }
  },

如果用户未授权位置信息获取,可以降级使用ip获取用户位置信息 Python/PHP:免费IP归属地查询接口和通过ip获取大致位置信息

参考 微信小程序–获取地理位置名称

关注
打赏
1665367115
查看更多评论
立即登录/注册

微信扫码登录

0.1000s