手机端地址调用系统导航

This commit is contained in:
Rei
2026-09-09 12:46:04 +08:00
parent 65cb9edcee
commit b9376dfeec
2 changed files with 18 additions and 4 deletions
+17 -3
View File
@@ -1,4 +1,5 @@
import { Link } from 'react-router-dom'
import type { MouseEvent } from 'react'
import { PRIMARY_NAV } from '@/data/nav'
import { getCMSConfig, useCMS, useCMSTexts } from '@/services/cms'
@@ -9,7 +10,20 @@ export default function Footer() {
const phoneLink = hotline.replace(/[^\d+]/g, '')
const companyName = texts['footer.company'] || '成都阿美巴企业管理咨询有限公司'
const address = String(config?.contact_address || '四川省成都市双流区正兴街道湖畔路北段366号1栋3楼1号').trim()
const amapLink = `https://uri.amap.com/search?keyword=${encodeURIComponent(`${companyName} ${address}`)}&city=${encodeURIComponent('成都')}&view=map&callnative=1&src=ameiba`
// Desktop falls back to AMap's web search. On phones use the operating system's
// map-navigation scheme so the user's installed/default map app handles the route.
const amapLink = `https://uri.amap.com/search?keyword=${encodeURIComponent(address)}&city=${encodeURIComponent('成都')}&view=map&src=ameiba`
const openNavigation = (event: MouseEvent<HTMLAnchorElement>) => {
const ua = window.navigator.userAgent
const destination = encodeURIComponent(address)
if (/Android/i.test(ua)) {
event.preventDefault()
window.location.href = `geo:0,0?q=${destination}`
} else if (/iPhone|iPad|iPod/i.test(ua)) {
event.preventDefault()
window.location.href = `maps://?q=${destination}`
}
}
return (
<footer className="site-footer">
<div className="container footer-grid">
@@ -18,10 +32,10 @@ export default function Footer() {
<p className="footer-desc">
{texts['footer.description'] || config?.slogan || '帮助企业看清位置、找到方向、持续进化。'}
</p>
<a className="footer-address" href={amapLink} target="_blank" rel="noreferrer" aria-label={`在高德地图中查找并导航至${address}`}>
<a className="footer-address" href={amapLink} onClick={openNavigation} aria-label={`导航至${address}`}>
<span>{texts['footer.address_title'] || '公司地址'}</span>
<strong>{address}</strong>
<em>{texts['footer.navigate_label'] || '打开高德地图导航'} →</em>
<em>{texts['footer.navigate_label'] || '打开地图导航'} →</em>
</a>
</div>
<div>