微信小程序如何获取地址


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 相关文章推荐
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
jquery 选取方法都有哪些
May 18 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
浅析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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
javascript禁用Tab键脚本实例
2013/11/22 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
Python中的下划线详解
2015/06/24 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
解析Python3中的Import
2019/10/13 Python
浅析Django中关于session的使用
2019/12/30 Python
golang/python实现归并排序实例代码
2020/08/30 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
python中使用np.delete()的实例方法
2021/02/01 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
机电一体化大学生求职信
2013/11/08 职场文书
工程师岗位职责规定
2014/02/26 职场文书
学位证书委托书
2014/09/30 职场文书
公司员工离职证明书
2014/10/04 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书