uni-app实现微信小程序一键导航效果代码详解

一键导航无论是在网站、小程序或者APP中都非常常见的一个功能,用户通过一键导航唤醒APP地图并导航到指定位置。

那么作为一个如此常见到可以说是必备的功能,我们在开发中要如何实现?实现这个功能点复杂吗?

本篇文章就来介绍在前端开发中使用uni-app如何实现微信小程序的一键导航功能。


一键导航代码如下:

<view @click="navigateToLocation" class="menu_item">
一键导航
</view>
// 一键导航到指定位置
navigateToLocation() {
uni.openLocation({
latitude: 39.9042, // 目标地点的纬度,浮点数,范围为-90~90
longitude: 116.4074, // 目标地点的经度,浮点数,范围为-180~180
scale: 18, // 缩放比例,范围5~18
name: '目标位置', // 位置名
address: '北京市朝阳区', // 详细地址,选填
success() {
console.log('导航启动成功');
},
fail(error) {
console.log('导航启动失败', error);
}
});
}

uni.openLocation:使用应用内置地图查看位置。

需要修改的参数:

    latitude:你最终目标地点的纬度

    longitude:你最终目标地点的纬度

    name:展示给用户查看的名称

推荐一个实用取点工具,输入你的目标点详细地址获取对应经纬度《在线经纬度和详细地址相互转换

注:这是本人基于高德地图开放接口实现的完全免费的经纬度获取工具。

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!