微信小程序获取地理位置

wxml

<!--index.wxml-->
<view class="wrapper">
  <view class="page-body">
    <view class="page-body-wrapper">

      <form bindsubmit="openLocation">
        <view class="page-body-form">

            <text class="page-body-form-key">经度</text>
            <input class="page-body-form-value" type="text" value="{{location.longitude}}" name="longitude"></input>

            <text class="page-body-form-key">纬度</text>
            <input class="page-body-form-value" type="text"  value="{{location.latitude}}" name="latitude"></input>


            <text class="page-body-form-key">位置名称</text>
            <input class="page-body-form-value" type="text"  value="河北" name="name"></input>


            <text class="page-body-form-key">详细位置</text>
            <input class="page-body-form-value" type="text"  value="石家庄职业技术学院" name="address"></input>

        </view>

        <view class="page-body-buttons">
          <button class="page-body-button" type="primary" bindtap="getLocation">获取位置</button>
          <button class="page-body-button" type="primary" formType="submit">查看位置</button>
        </view>

      </form>
    </view>
  </view>
</view>

wxss

.wrapper{
  height: 100%;
  background:#fff;
}
.page-body-form-value{
  font-size: 14px;
  color:darkturquoise;
  font-weight: bold;
  padding-left: 15px;
  border: 1px solid rgb(72, 165, 131);
  border-radius: 4px;
  height: 30px;
  line-height: 30px;
}

.page-body-form-key{
  font-size:14px;
  padding: 10px;
  margin-top:15px;
  font-family: "Microsoft Yahei";
  font-weight: bold;
  height: 30px;
  line-height: 30px;
}

.page-body-button{
  margin-top:20px;
  line-height: 2;
}

js

//index.js
//获取应用实例
var app = getApp()
Page( {

  data: {
    //默认未获取地址
    hasLocation: false
  },

  //获取经纬度
  getLocation: function(e) {
    console.log(e)
    var that = this
    wx.getLocation( {
      success: function( res ) {
        console.log( res )
        that.setData( {
          hasLocation: true,
          location: {
            longitude: res.longitude,
            latitude: res.latitude
          }
        })
      }
    })
  },
//根据经纬度在地图上显示
  openLocation: function( e ) {
    var value = e.detail.value
    wx.openLocation( {
      longitude: Number( value.longitude ),
      latitude: Number( value.latitude )
    })
  }
})