微信小程序--获取用户地理位置名称(无须用户授权)的方法

 更新时间:2019年04月29日 11:13:50   作者:意外金喜  
这篇文章主要介绍了微信小程序-获取用户地理位置名称(无须用户授权)的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

在本文 微信小程序--获取用户地理位置名称(无须用户授权) 之前需要先看看

微信小程序-获取用户session_key,openid,unionid - 后端为nodejs

代码封装是在上文添加的。

准备

1、在http://lbs.qq.com/网站申请key

2、在微信小程序后台把apis.map.qq.com添加进request合法域名

效果

添加封装

/**
 * 发起网络请求
 * @param {string} url 
 * @param {object} params 
 * @return {Promise} 
 */
 static request(url, params, method = "GET", type = "json") {
 console.log("向后端传递的参数", params);
 return new Promise((resolve, reject) => {
  let opts = {
  url: url,
  data: Object.assign({}, params),
  method: method,
  header: { 'Content-Type': type },
  success: resolve,
  fail: reject
  }
  // console.log("请求的URL", opts.url);
  wx.request(opts);
 });
 };
 /**
 * 获取用户中心位置经纬度
 * @param {ctx} name 
 */
 static getCenterLocation(name) {
 return new Promise((resolve, reject) => name.getCenterLocation({ success: resolve, fail: reject }));
 }

如果已经存在,则不用添加

js

let app = getApp();
let wechat = require("../../utils/wechat");
Page({
 onReady(e) {
 let mapCtx = wx.createMapContext('myMap');
 setTimeout(() => {
  mapCtx.moveToLocation();
 }, 1000);
 setTimeout(() => {
  this.getAddress(mapCtx);
 }, 2000);
 },
 getAddress(mapCtx) {
 wechat.getCenterLocation(mapCtx)
  .then(d => {
  console.log(d);
  let { latitude, longitude } = d;
  console.log("当前位置纬度", latitude, "当前位置经度", longitude);
  let url = `https://apis.map.qq.com/ws/geocoder/v1/`;
  let key = 'XXXXX-D6FAD-RSG4U-HBE6F-NVFNK-XXXXX';
  let params = {
   location: latitude + "," + longitude,
   key
  }
  return wechat.request(url, params);
  })
  .then(d => {
  console.log(d);
  console.log("当前地址", d.data.result.address);
  })
  .catch(e => {
  console.log(e);
  })
 }
 
})

html

<map id="myMap" show-location="true" scale="16" />

css

page{
 height: 100%;
}
#myMap{
 width: 100%;
 height: 100%;
}

参考地址:

https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map
https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-map.html

以上所述是小编给大家介绍的微信小程序-获取用户地理位置名称(无须用户授权)的方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 原生js封装运动框架的示例讲解

    原生js封装运动框架的示例讲解

    下面小编就为大家带来一篇原生js封装运动框架的示例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 使用Echart实现绘制立体的柱状图

    使用Echart实现绘制立体的柱状图

    EChart开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。本文将利用EChart绘制立体的柱状图,感兴趣的可以学习一下
    2022-03-03
  • 在JavaScript中使用高阶函数的方法

    在JavaScript中使用高阶函数的方法

    JavaScript可以接受高阶函数。这种处理高阶函数的能力以及其他特点,使JavaScript成为非常适合函数式编程的编程语言之一,这篇文章主要介绍了如何在JavaScript中使用高阶函数,需要的朋友可以参考下
    2022-09-09
  • vue中双token和无感刷新token的区别

    vue中双token和无感刷新token的区别

    本文主要介绍了vue中双token和无感刷新token的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-05-05
  • js版本A*寻路算法

    js版本A*寻路算法

    js版本A*寻路算法...
    2006-12-12
  • javascript实现抽奖程序的简单实例

    javascript实现抽奖程序的简单实例

    下面小编就为大家带来一篇javascript实现抽奖程序的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 前端接口报错Required request body is missing解决办法

    前端接口报错Required request body is missing解决办法

    这篇文章主要给大家介绍了关于前端接口报错Required request body is missing的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-12-12
  • 深入浅析JavaScript中prototype和proto的关系

    深入浅析JavaScript中prototype和proto的关系

    prototype,每一个函数对象都有一个显示的prototype属性,而proto每个对象都有一个名为_proto_内部隐藏属性。本文给大家介绍JavaScript中prototype和proto的关系,需要的朋友参考下
    2015-11-11
  • 浅谈js二维码扫码登录是什么原理

    浅谈js二维码扫码登录是什么原理

    这篇文章主要介绍了浅谈js二维码扫码登录是什么原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】

    详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】

    本篇文章主要介绍了JavaScript的延迟对象、跨域、模板引擎、弹出层、AJAX,对其进行示例解析,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12

最新评论