微信小程序嵌套的webview页面实现导航,可跳转高德百度等app

发布时间 2023-04-13 14:36:37作者: ZerlinM

需求:
微信小程序中使用webview嵌套了h5页面,h5页面中有经纬度,需要实现唤醒 高德app。
实现思路:
将经纬度传给小程序,再实现打开地图页面。

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')

    onLoad()

  }, [])

  const onLoad = () => {
    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;