微信小程序如何获取地址


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架构javascript基础体系
Jan 01 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
javascript 易错知识点实例小结
Apr 25 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下打开URL地址的几种方法小结
2010/05/16 PHP
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
wxPython多个窗口的基本结构
2019/11/19 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
查环查孕证明
2014/01/10 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
销售经理岗位职责
2014/03/16 职场文书
设计顾问服务计划书
2014/05/04 职场文书
2014全年工作总结
2014/11/27 职场文书
自我检讨书范文
2015/01/28 职场文书
物业接待员岗位职责
2015/04/15 职场文书
介绍信范文大全
2015/05/07 职场文书
天那边观后感
2015/06/09 职场文书