微信小程序如何获取地址


Posted in Javascript onDecember 24, 2019

本文实例为大家分享了微信小程序获取地址的具体代码,供大家参考,具体内容如下

微信小程序如何获取地址

wxml

<map id="map" longitude="{{data.longitude}}" latitude="{{data.latitude}}" scale="14" markers="{{markers}}" polyline="{{polyline}}" show-location style="width: 100%; height: 500px;"></map>
<text>
 {{data.longitude}}
 {{data.latitude}}
 {{address}}
</text>
<!-- longitude 中心经度 -->
<!-- latitude 中心纬度 -->
<!-- scale 缩放级别,取值范围为3-20 -->
<!-- markers 标记点 -->

js

var QQMapWX = require('../js/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 data:{
  data:"",
  str:"",
  address:""
 },
 onLoad: function () {
  let _this = this;
  // 实例化API核心类
  qqmapsdk = new QQMapWX({
   key: 'key'
  });
  // Promise 获取地址
  let gets = new Promise((resolve, reject) => {
   wx.getLocation({
    type: 'wgs84',
    success:resolve
   })
  }).then(function(res){
   console.log(res)
   _this.setData({
    data:res
   })
  })

  // 正常方式获取地址
  wx.getLocation({
   type: 'wgs84',
   success:function(res){
    _this.setData({
     str: _this.res
    })
    console.log(res)
    var demo = new QQMapWX({
     key: 'key'
    });
    // 解析地址
    demo.reverseGeocoder({//地址解析
     location: {
      latitude: res.latitude,
      longitude: res.longitude
     },
     success: function (res) {//转为具体地址
      console.log(res);
      //获得地址
      _this.setData({
       address: res.result.address
      })
     },
     fail: function (res) {
      console.log(res);
     }
    });
   }
  })
 },

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
H5 js点击按钮复制文本到粘贴板
Nov 19 Javascript
浅析vue-router中params和query的区别
Dec 24 #Javascript
JavaScript实现英语单词题库
Dec 24 #Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 #Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 #Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 #Javascript
javascript实现鼠标点击生成文字特效
Dec 24 #Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 #Javascript
You might like
PHP - Html Transfer Code
2006/10/09 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
Python采集腾讯新闻实例
2014/07/10 Python
Python 数据结构之旋转链表
2017/02/25 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
简历中个人自我评价范文
2013/12/26 职场文书
建筑经济管理专业求职信分享
2014/01/06 职场文书
初中生自我鉴定
2014/02/04 职场文书
大学生军训感想
2014/02/16 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
2014年技术员工作总结
2014/11/18 职场文书
党支部评议意见
2015/06/02 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技