需求:
微信小程序中使用webview嵌套了h5页面,h5页面中有经纬度,需要实现唤醒 高德app。
实现思路:
此处h5未配置wxSDK,无法直接使用 openLocation ,所以将经纬度传给小程序,map页面为跳转中间页,再实现打开地图页面。
h5:
// 高德地图导航
const aMapNavigate = (address, lng, lat) => {
wxService.wx.miniProgram.navigateTo({
url: `/pages/map/index?address=${address}&lng=${lng}&lat=${lat}`
})
}
// 如果使用的是腾讯地图,则直接使用如下方法,小程序中无需增加map页面
const aMapNavigate = (address, lng, lat) => {
const coord = lat + ',' + lng;
let addrStr = `coord:${coord};title:${address};addr:${address}&referer=myapp`
setTimeout(() => {
location.href = `//apis.map.qq.com/uri/v1/marker?marker=${addrStr}`;
}, 100)
}
小程序中pages/map/index
index.tsx
import React, { useEffect } from 'react';
import Taro, { useDidShow } from '@tarojs/taro';
import { getPageOptions } from '@/utils/commonUtils';
import stateStorage from '@/storage/stateStorage';
import './index.module.less'
const Map: React.FC = () => {
useEffect(() => {
stateStorage.del('isJumpMap')
onl oad()
}, [])
const onl oad = () => {
const options = getPageOptions();
const { address, lng, lat } = options;
Taro.openLocation({
latitude: Number(lat), //纬度number
longitude: Number(lng), // 经度number
name: address,
address: address,
scale: 18,
success: () => {
stateStorage.set('isJumpMap', true, 0.5)
}
})
}
useDidShow(() => {
const isJumpMap = stateStorage.get('isJumpMap')
if (isJumpMap) Taro.navigateBack({
delta: 1
})
})
return (
<></>
)
}
export default Map;
标签:const,微信,app,跳转,address,lat,import,lng,页面
From: https://www.cnblogs.com/ZerlinM/p/17314741.html