使用微信小程序唤起导航的常用方式

大家好，欢迎来到IT知识分享网。

1.微信内置地图

可以使用小程序的wx.openLocation方法，该方法可以打开微信内置地图，并显示指定的位置坐标。如果用户手机上安装了其他地图应用，可能会出现选择使用哪个地图应用进行导航的提示。

 wx.openLocation({ latitude: 目标地点纬度, longitude: 目标地点经度, scale: 18, name: '目的地名称', address: '目的地地址' })

通过Taro.openLocation 添加中间跳转页然后唤起手机导航app 进行选择

封装效果如下 

// 需要使用唤起导航的页面 this.appStore.setPostMessage([ { position: { lat: latitude,// 经纬度数据 lng: longitude, address: '地点名称', }, }, ]); // 提供中间页 Taro.navigateTo({ url: '/subPages/callMapApp/callMapApp', });

import Taro, { Config } from '@tarojs/taro'; import React, { Component } from 'react'; import { View } from '@tarojs/components'; import { toJS } from 'mobx'; import { inject, observer } from 'mobx-react'; import StorageUtil from '@/util/StorageUtil'; import { getObjValByArray } from '@/util'; import './callMapApp.scss'; import ConstantList from '@/util/ConstantList'; @inject('appStore') @observer export default class CallMapApp extends Component { constructor(props) { super(props); this.state = {}; this.appStore = props.appStore; } componentDidShow() { // 在postMessage中获取 导航页面传递position的信息 const postPosition = getObjValByArray(this.appStore.postMessage, 'position'); if (postPosition) { Taro.openLocation({ latitude: postPosition.lat, longitude: postPosition.lng, address: postPosition.address, complete: () => { console.log('complete', inviteUserId, inviteType); this.appStore.setPostMessage(); }, }); } else { const mapAppCallbackUrl = StorageUtil.getSync('mapAppCallbackUrl', null); if (mapAppCallbackUrl) { Taro.getApp().$app.globalData.navigateToWeb(mapAppCallbackUrl, false); StorageUtil.remove('mapAppCallbackUrl'); } else { Taro.navigateBack({ delta: 0 }); } } } componentWillUnmount() { this.appStore.setPostMessage([]); } render() { return <View className='CallMapApp_box'></View>; } } 

主要重点

 Taro.openLocation({ latitude: postPosition.lat, longitude: postPosition.lng, address: postPosition.address, complete: () => { this.appStore.setPostMessage(); }, });

2. 腾讯地图插件

需要注意的是，使用第三方地图服务可能需要申请相应的密钥，并遵守其使用条款和限制。

  let plugin = requirePlugin('routePlan');           let key = 'xxxxxxxxxxxxx'; //使用在腾讯位置服务申请的key             let referer = 'app的名称'; //调用插件的app的名称             let endPoint = JSON.stringify({             //终点               name: name,   latitude: latitude,   longitude: longitude,             }); wx.navigateTo({             url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint, });

3. 腾讯地图小程序

// 腾讯地图小程序    let endPoint = JSON.stringify({               //终点       name: name,       location: {           lat: latitude,           lng: longitude,       },     });             wx.navigateToMiniProgram({               appId: 'xxxxx', //要打开的小程序 appId               path: 'pages/multiScheme/multiScheme?endLoc=' + endPoint, //打开的页面路径，如果为空则打开首页               fail: function () {                 wx.showToast({                   icon: 'none',                   title: '打开失败，请重试',                 });               },             });           }}