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
}
}
主要重点
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: '打开失败，请重试',
});
},
});
}}