我们要实现的是,点击一个按钮然后,跳转到地图位置选择页面,选择完位置之后,拿到详细的数据信息(经度、纬度、选择名称、选择的详情)多了不说,直接上代码。
1.wxml
<view class='mapContainer'>
<view class='longitude'>
<text class='cont'>
经度:\t\t\t{{location.longitude}}\n纬度:\t\t\t{{location.latitude}}\n位置名称:\t\t\t{{location.name}}\n详细地址:\t\t\t{{location.address}}\n点击选择位置、选择完地址之后,点击右上角确定
</text>
</view>
<button class='page-body-button btn' bindtap='selectLocation'>选择位置</button>
</view>
2.wxss
.mapContainer{
width: 100%;
}
.page-body-button{
width: 98%;
line-height: 2;
background: #53cabd;
color: #fff;
}
.cont{
display: inline-block;
line-height: 2;
text-align: left;
vertical-align: middle;
margin-top: -48rpx;
}
.longitude,.latitude{
background: #000;
color: #fff;
text-align: center;
font-size: 28rpx;
}
.btn{
margin-top: 10rpx;
}
3.js
// 选择位置
selectLocation:function(e){//自行定义tap事件
var that = this
wx.chooseLocation({//微信API--打开地图选择位置。
success: function (res) {//成功之后,目前只返回这四组参数
打开地图选择位置。
success: function (res) {//成功之后,目前只返回这四组参数
name | 位置名称 |
address | 详细地址 |
latitude | 纬度,浮点数,范围为-90~90,负数表示南纬 |
longitude | 经度,浮点数,范围为-180~180,负数表示西经 |
console.log(res.name) that.setData({ location: { name:res.name, address:res.address, longitude:res.longitude, latitude:res.latitude } }) }, fail:function(error){ console.log(error) }, complete:function(e){ console.log(e) } }) }
4.效果图
自带搜索功能,很不错的哦!
5.是不是很简单呢?如果你想用这个经纬度,去调取其他的api也是可以的,例如调取谷歌的,百度的。
这是我的微信公众号:
不定期更新前端知识
这个是我本人的,前端技术QQ交流群,有不会的问题,可以在在群里面问: