zoukankan      html  css  js  c++  java
  • 微信小程序实例-获取当前的地理位置、速度

    微信小程序官方文档 

    https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html

    JS代码

    //index.js
    //获取应用实例
    var app = getApp()
    Page({
      data: {
        motto: '示例小程序-获取当前地理位、速度',
        userInfo: {},
        hasLocation:false,
        location:{}
      },
      //事件处理函数
      bindViewTap: function() {
        wx.navigateTo({
          url: '../logs/logs'
        })
      },
      onLoad: function () {
        console.log('onLoad')
        var that = this
        //调用应用实例的方法获取全局数据
        app.getUserInfo(function(userInfo){
          //更新数据
          that.setData({
            userInfo:userInfo
          })
        }),
         wx.getLocation( {
          success: function( res ) {
            console.log( res )
            that.setData( {
              hasLocation: true,
              location: {
                longitude: res.longitude,
                latitude: res.latitude
              }
            })
          }
        })
      }
    })

    index.wxml

    <!--index.wxml-->
    <view class="container">
      <view  bindtap="bindViewTap" class="userinfo">
        <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </view>
      <view class="usermotto">
       <!-- <text class="user-motto">{{motto}}
    </text>-->
        <text>经度:{{location.longitude}}
    </text>
        <text>纬度:{{location.latitude}}</text>
      </view>
    </view>

    运行效果

  • 相关阅读:
    cf 559a **
    poj 2599 单调栈 ***
    Unicode(UTF-8, UTF-16)令人混淆的概念
    Uber Go 语言编程规范
    深入理解 Go Channel
    如何使用 GZIP 来优化网站
    跨域资源共享 CORS 详解 [转载]
    使用dig查询DNS解析过程
    golang 实现简单DNS服务器
    一文看懂JS的异步
  • 原文地址:https://www.cnblogs.com/hantianwei/p/6111546.html
Copyright © 2011-2022 走看看