微信小程序如何获取地址


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 相关文章推荐
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
vue 实现路由跳转时更改页面title
Nov 05 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 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将数据导入到Foxmail
2006/10/09 PHP
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
深入理解vue路由的使用
2017/03/24 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
python开发之thread线程基础实例入门
2015/11/11 Python
pyqt5实现登录界面的模板
2020/05/30 Python
python3 实现口罩抽签的功能
2020/03/11 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
会计与审计专业大专生求职信
2013/10/03 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
工作检讨书怎么写
2014/10/10 职场文书
后备干部推荐材料
2014/12/24 职场文书
教师节慰问信
2015/02/15 职场文书
Python jiaba库的使用详解
2021/11/23 Python
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python