微信小程序如何获取地址


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 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 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之第三天
2006/10/09 PHP
一个php作的文本留言本的例子(六)
2006/10/09 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
如何在PHP中使用数组
2020/06/09 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
Python制作爬虫抓取美女图
2016/01/20 Python
spyder常用快捷键(分享)
2017/07/19 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
详解Python设计模式之策略模式
2020/06/15 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
python如何实现DES加密
2020/09/21 Python
Python ellipsis 的用法详解
2020/11/20 Python
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
社区反邪教工作方案
2014/06/16 职场文书
资料员岗位职责
2015/02/10 职场文书
春节慰问信范文
2015/02/15 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers