微信小程序如何获取地址


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自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
mock.js模拟数据实现前后端分离
Jul 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实现统计邮件大小的方法
2013/08/06 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
Python转码问题的解决方法
2008/10/07 Python
python妹子图简单爬虫实例
2015/07/07 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
Flask之flask-session的具体使用
2018/07/26 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
Python tcp传输代码实例解析
2020/03/18 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
学术会议邀请函范文
2014/01/22 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
写自荐信的注意事项
2014/03/09 职场文书
中学生检讨书范文
2014/11/03 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
创业计划书之花店
2019/09/20 职场文书
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫