微信小程序如何获取地址


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 相关文章推荐
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
js前端面试题及答案整理(一)
Aug 26 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
如何正确理解vue中的key详解
Nov 02 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 adodb介绍
2009/03/19 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
javascript 动态参数判空操作
2008/12/22 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
React组件生命周期详解
2017/07/03 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
Python错误处理操作示例
2018/07/18 Python
如何更优雅地写python代码
2019/07/02 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
教师见习报告范文
2014/11/03 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
python中 Flask Web 表单的使用方法
2022/05/20 Python