需求
点击页面上的打电话按钮,跳转到用户手机的拨号界面;
点击页面上的导航按钮,跳转到微信小程序的导航页面,并显示要导航的地方的名字和地址。
实现代码
<view class="bto-2" @click="handlePhone">
<view>
<uni-icons type="phone-filled" size="44rpx" color="#fff"></uni-icons>
</view>
<text>拨打电话</text>
</view>
<view class="bto-3" @click="handleMap">
<view>
<uni-icons type="map-pin-ellipse" size="44rpx" color="#fff"></uni-icons>
</view>
<text>导航</text>
</view>
<script>
// 打电话
const handlePhone = () => {
uni.makePhoneCall({
phoneNumber: '19862161980'
});
}
// 导航
const handleMap = () => {
uni.openLocation({
latitude: 39.908860644562, // 维度
longitude: 116.39743110773, // 经度
name: '店铺地址', // 地点名称
address: '北京市朝阳区xxx路xxx号' // 地点位置
})
}
</script>
说明:
uni.openLocation的latitude【维度】和longitude【经度】这两个属性是必填项。
页面效果
下方地址如果与你家店铺地址一样的话还请见谅,我这只是用来举个例子,但是下方导航的位置是北京,因为导航具体导航到哪个位置,是根据你传入的经纬度来进行定位的而不是地址文字。