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