在前面一篇,我们已经写完了 address 页面,页面中显示的,并非是地址数据,那是直接写在 data 中的测试数据,并没有实际意义。
接下来,我们将调用微信小程序提供的地图 API 获取地址数据。
添加一个按钮
在 address.wxml
中,加入一个按钮,代码如下:
<view class="bottom_btn">
<button type="primary" bindtap='add'>添加常用地址</button>
</view>
在 address.wxss
中,添加样式代码如下:
.bottom_btn{
position: absolute;
bottom: 30rpx;
width: 90%;
left: 5%;
}
重新进入 address 页面,显示效果如下图:
按钮中,绑定了一个 add 的事件函数,当我们点击按钮的时候,将调用 add 函数。
API 调用:选择地址
打开 address.js
文件,编写 add 函数,函数与页面事件函数在同一层级,代码如下:
add: function () {
wx.chooseLocation({
success: res => {
var address = {
title: res.name,
address: res.address,
latitude: res.latitude,
longitude: res.longitude
}
this.data.lists.push(address);
this.setData({
lists: this.data.lists
});
}
})
},
这里主要调用了微信小程序的地图 API,wx.chooseLocation(Object object),选择地址成功,将会返回地址的名称(name)、详细地址(address)、纬度(latitude)以及经度(longitude),四个属性值。
返回的数据,我们直接添加 lists 列表中,页面将会即时显示出新增加的地址。如下图:
页面传参
从上面的 API 中,我们获取到了一个地址的 4 个参数值:name、address、latitude 以及 longitude,我们需要将这些参数值渲染到页面中。
当我们点击列表中某一个地址的时候,将参数值传到逻辑层,调用 API,打开地图,显示导航。于是,修改 address.wxml
代码如下:
<scroll-view scroll-y>
<block wx:for="" wx:key="" wx:for-index="index">
<view class="list" bindtap='gotoLocation' data-index="" data-latitude="" data-longitude="" data-title="" data-address="" bindlongpress="del">
<view class="title"></view>
<view class="access"></view>
<view class="desc"></view>
</view>
</block>
</scroll-view>
<view class="bottom_btn">
<button type="primary" bindtap='add'>添加常用地址</button>
</view>
可以看出,在列表中,我们绑定了一个 gotoLoacation
的事件,同时,将那 4 个参数值,通过 data-*
属性的方式,附在了页面中。
API 调用:打开地址
当点击列表的时候,将触发 gotoLocation
事件函数。
gotoLocation: function(e){
var latitude = e.currentTarget.dataset.latitude;
var longitude = e.currentTarget.dataset.longitude;
var name = e.currentTarget.dataset.title;
var address = e.currentTarget.dataset.address;
wx.openLocation({
latitude,
longitude,
name,
address,
scale: 15
})
},
这里主要调用了打开地址 API wx.openLocation,传入页面中的 4 个参数值,即可实现如下图所示功能页面,而无需再写页面代码。
通过两个地图 API 的调用,使得我们这个页面多了一些交互,能够选择并添加地址,还能够打开地址,显示导航。
总结
这一篇,我们初步接触了微信小程序 API 的使用方法,并使用了两个地图 API:选择地址以及打开地址。
另外,还接触了从视图层传参到逻辑层的方式。