微信小程序如何获取地址

 更新时间:2019年12月24日 11:46:33   作者:曳猫、  
这篇文章主要介绍了微信小程序获取地址的具体方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序获取地址的具体代码,供大家参考,具体内容如下

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);
     }
    });
   }
  })
 },

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 移动端如何用下拉刷新的方式实现上拉加载

    移动端如何用下拉刷新的方式实现上拉加载

    这篇文章主要介绍了移动端如何用下拉刷新的方式实现上拉加载,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • uni-app低成本封装一个取色器组件的简单方法

    uni-app低成本封装一个取色器组件的简单方法

    最近想实现一个uniapp取色器组件,实现后发现效果还不错,下面这篇文章主要给大家介绍了关于uni-app低成本封装一个取色器组件的相关资料,文中通过图文介绍的介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • 微信小程序预览二进制流文件的方法

    微信小程序预览二进制流文件的方法

    这篇文章主要为大家详细介绍了微信小程序预览二进制流文件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • JavaScript的事件机制详解

    JavaScript的事件机制详解

    事件是将JavaScript脚本与网页联系在一起的主要方式,是JavaScript中最重要的主题之一。本文将详细探讨JavaScript的事件机制,并对比分析了浏览器之间的不同,具体内容包括事件流、事件处理程序绑定方式、事件对象等。
    2017-01-01
  • 一个不用onmouseup的拖动函数

    一个不用onmouseup的拖动函数

    一个不用onmouseup的拖动函数...
    2007-05-05
  • vscode 对 typescript代码调试的步骤

    vscode 对 typescript代码调试的步骤

    在VS Code中,要对 TypeScript代码进行调试,需要先编译 TypeScript 代码为JavaScript代码,这篇文章主要介绍了vscode对typescript代码调试的方法,需要的朋友可以参考下
    2023-03-03
  • 用js实现多域名不同文件的调用方法

    用js实现多域名不同文件的调用方法

    用js实现多域名不同文件的调用方法...
    2007-01-01
  • 小程序实现新用户判断并跳转激活的方法

    小程序实现新用户判断并跳转激活的方法

    这篇文章主要介绍了小程序实现新用户判断并跳转激活的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 百度地图api如何使用

    百度地图api如何使用

    如果想用百度地图api,首先需要先获取一个百度地图api的密钥,然后引入百度地图的api,这篇文章就讲下百度地图api如何使用的相关资料,需要的朋友可以参考下
    2015-08-08
  • Javascript 构造函数 实例分析

    Javascript 构造函数 实例分析

    一般构造函数没有返回值,他们通过关键字this初始化对象,没有返回值。当然一个构造器允许返回一个对 象,如果这样的话 返回的对象将变成new 表达式的值,在这种情况下值为this的对象将抛弃
    2008-11-11

最新评论