微信小程序获取地理位置

wxml

  
    

      

        

            经度
            

            纬度
            


            位置名称
            


            详细位置
            

        

        
          获取位置
          查看位置
        

      
    
  

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