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

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: '打开失败，请重试',

                });

              },

            });

          }}