Uni-app 调用微信地图导航功能【有图】

前言

我们在使用uni-app时，有时候会遇到需要开发地图和导航的功能，这些方法其实微信小程序的API已经帮我们封装好了
详见：微信小程序开发文档
接下来我们就演示如何用uni-app来使用他们

使用

<template><view><button type="primary" @click="chooseLocation"class="acc">选择位置 </button>
        经度：<span>{{longitude==' '|| longitude==null?'/':longitude}}</span>
        纬度：<span>{{latitude==' '|| latitude==null?'/':latitude}}</span><button type="default" @click="nav">导航 </button></view></template><script setup>import{ getCurrentInstance, ref }from"vue";import{ onBackPress }from"@dcloudio/uni-app";const{ proxy }=getCurrentInstance();const name =ref(null)const address =ref(null)const latitude =ref(null)const longitude =ref(null)functionnav(){
        uni.openLocation({latitude: latitude.value,longitude: longitude.value,name: name.value,scale:15,address: address.value,success:function(res){
                proxy.$modal.msgSuccess('打开地图成功！', res);},fail:function(error){
                proxy.$modal.msgError('打开地图失败！', error);},});}functionchooseLocation(){
        uni.chooseLocation({success:function(res){
                name.value = res.name;// 位置名称
                address.value = res.address;// 详细地址
                latitude.value = res.latitude;// 纬度
                longitude.value = res.longitude;// 经度
                console.log('name', name.value);
                console.log('address', address.value);
                console.log('latitude', latitude.value);
                console.log('longitude', longitude.value);},fail:function(error){
                console.error('选择位置失败', error);},});}// 获取当前位置的经纬度
    uni.getLocation({success:function(res){var latitude = res.latitude;// 纬度var longitude = res.longitude;// 经度
            console.log('latitude', latitude);
            console.log('longitude', longitude);// 在这里可以将经纬度转换为地址信息，后续步骤中会介绍如何实现这一功能。},fail:function(error){
            console.error('获取地理位置失败', error);},});// 页面加载onBackPress(()=>{
        proxy.$tab.switchTab('/pages/office/index');returntrue;});</script><style>.acc {
        margin-bottom: 20px;}</style>