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


Posted in Javascript onApril 29, 2019

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

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

准备

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

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

Javascript 相关文章推荐
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
node.js入门教程
Jun 01 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 #Javascript
微信小程序-form表单提交代码实例
Apr 29 #Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 #Javascript
微信小程序传值以及获取值方法的详解
Apr 29 #Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 #Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 #Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 #Javascript
You might like
PHP 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
vue2配置scss的方法步骤
2019/06/06 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
Python 文件操作实现代码
2009/10/07 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
Python socket实现简单聊天室
2018/04/01 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
保密协议书范本
2014/04/22 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
高中生学习计划书
2014/09/15 职场文书