微信小程序如何获取地址


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插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
layui实现动态和静态分页
Apr 28 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
微信小程序用户授权最佳实践指南
May 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文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
Vue如何实现验证码输入交互
2020/12/07 Vue.js
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
python3 读写文件换行符的方法
2018/04/09 Python
python 字符串和整数的转换方法
2018/06/25 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
在python中使用nohup命令说明
2020/04/16 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
20年同学聚会感言
2014/02/03 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
2014年档案室工作总结
2014/12/01 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
行政前台岗位职责
2015/04/16 职场文书
学校就业保障协议书
2019/06/24 职场文书
Go语言应该什么情况使用指针
2021/07/25 Golang
MySQL空间数据存储及函数
2021/09/25 MySQL