效果如图:
部分代码如下:
1.html代码
<view class="service">
<a href="#" @click.prevent="openMap">
<image src="../../static/navigation.png" mode=""></image>到这去
</a>
<text class="cut-rule"></text>
<a href="#" @click.prevent="openPhone">
<image src="../../static/phone.png" mode=""></image>打电话
</a>
</view>
2.js代码
export default {
data() {
return {
};
},
onLoad: function(option) {
},
methods: {
// 打开map地图
openMap() {
let that = this
uni.openLocation({
latitude: '纬度',
longitude: '经度',
scale: 12,
success: function() {
console.log('success');
}
});
var map = uni.createMapContext('map');
map.moveToLocation();
},
// 拨打电话
openPhone() {
uni.makePhoneCall({
// 手机号
phoneNumber: this.schoolInfo.concatUserPhone,
// 成功回调
success: (res) => {
console.log('调用成功!')
},
// 失败回调
fail: (res) => {
console.log('调用失败!')
}
});
}
}
3.less代码
.service {
margin-top: 10upx;
display: flex;
height: 80upx;
background-color: #F4F4F4;
a {
line-height: 80upx;
flex: 1;
text-align: center;
color: #575757;
vertical-align: middle;
image {
width: 34upx;
height: 34upx;
vertical-align: middle;
margin-right: 8rpx;
}
}
4.获取当前地理位置(根据具体情况使用)
// 获取当前地理位置信息
getLocation() {
uni.getLocation({
type: 'wgs84',
success: async (res) => {
"当前经度": res.longitude,
"当前纬度": res.latitude
}
});
}