|
|
@@ -0,0 +1,505 @@
|
|
|
+<!doctype html>
|
|
|
+<html lang="zh-CN">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>高德地图 - 下载应用</title>
|
|
|
+
|
|
|
+ <!-- iOS Smart App Banner -->
|
|
|
+ <meta name="apple-itunes-app" content="app-id=461703208, app-argument=https://apps.apple.com/cn/app/id461703208" />
|
|
|
+
|
|
|
+ <!-- 微信分享优化 -->
|
|
|
+ <meta property="og:title" content="高德地图 - 精准导航" />
|
|
|
+ <meta property="og:description" content="精准导航，出行必备" />
|
|
|
+ <meta property="og:image" content="https://your-domain.com/logo.png" />
|
|
|
+
|
|
|
+ <!-- 防止缓存 -->
|
|
|
+ <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
|
|
+ <meta http-equiv="Pragma" content="no-cache" />
|
|
|
+ <meta http-equiv="Expires" content="0" />
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
|
|
|
+ 'Microsoft YaHei', sans-serif;
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ min-height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ background: white;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 40px 30px;
|
|
|
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
|
|
|
+ text-align: center;
|
|
|
+ max-width: 400px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ border-radius: 20px;
|
|
|
+ margin: 0 auto 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 32px;
|
|
|
+ color: white;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .subtitle {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip-text {
|
|
|
+ font-size: 15px;
|
|
|
+ color: #888;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ line-height: 1.6;
|
|
|
+ background: #f8f9fa;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 12px;
|
|
|
+ border-left: 4px solid #667eea;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ padding: 16px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 12px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ text-decoration: none;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary {
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-secondary {
|
|
|
+ background: #f8f9fa;
|
|
|
+ color: #333;
|
|
|
+ border: 2px solid #e9ecef;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-secondary:hover {
|
|
|
+ background: #e9ecef;
|
|
|
+ transform: translateY(-1px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .success-msg {
|
|
|
+ display: none;
|
|
|
+ color: #28a745;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .loading {
|
|
|
+ display: none;
|
|
|
+ color: #667eea;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes spin {
|
|
|
+ 0% {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .spinner {
|
|
|
+ display: inline-block;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ border: 2px solid #f3f3f3;
|
|
|
+ border-top: 2px solid #667eea;
|
|
|
+ border-radius: 50%;
|
|
|
+ animation: spin 1s linear infinite;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div class="container">
|
|
|
+ <div class="logo">高</div>
|
|
|
+ <h1 class="title">高德地图</h1>
|
|
|
+ <p class="subtitle">精准导航，出行必备</p>
|
|
|
+
|
|
|
+ <div class="tip-text">
|
|
|
+ 📱 打开App Store搜索"高德地图"下载<br />
|
|
|
+ 🔗 或者复制链接在浏览器打开
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <a href="#" class="button btn-primary" id="openAppBtn">打开高德地图应用</a>
|
|
|
+ <button class="button btn-secondary" id="copyLinkBtn">复制页面链接</button>
|
|
|
+
|
|
|
+ <div class="success-msg" id="successMsg">✅ 链接已复制到剪贴板</div>
|
|
|
+ <div class="loading" id="loadingMsg"><span class="spinner"></span>正在检测应用...</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ // 高德地图URL Scheme和App Store链接
|
|
|
+ const APP_SCHEME = 'iosamap://' // 高德地图iOS URL Scheme
|
|
|
+ const APP_STORE_URL = 'https://apps.apple.com/cn/app/id461703208'
|
|
|
+
|
|
|
+ // Universal Links (高德地图支持)
|
|
|
+ const UNIVERSAL_LINK = 'https://uri.amap.com/navigation'
|
|
|
+
|
|
|
+ // 检测设备类型 - 只支持iOS
|
|
|
+ function getDeviceType() {
|
|
|
+ const userAgent = navigator.userAgent.toLowerCase()
|
|
|
+ if (/iphone|ipad|ipod/.test(userAgent)) {
|
|
|
+ return 'ios'
|
|
|
+ }
|
|
|
+ return 'other'
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检测浏览器类型
|
|
|
+ function getBrowserType() {
|
|
|
+ const userAgent = navigator.userAgent.toLowerCase()
|
|
|
+ if (userAgent.indexOf('micromessenger') !== -1) {
|
|
|
+ return 'wechat'
|
|
|
+ }
|
|
|
+ if (userAgent.indexOf('qq') !== -1) {
|
|
|
+ return 'qq'
|
|
|
+ }
|
|
|
+ if (userAgent.indexOf('safari') !== -1 && userAgent.indexOf('chrome') === -1) {
|
|
|
+ return 'safari'
|
|
|
+ }
|
|
|
+ if (userAgent.indexOf('chrome') !== -1) {
|
|
|
+ return 'chrome'
|
|
|
+ }
|
|
|
+ return 'other'
|
|
|
+ }
|
|
|
+
|
|
|
+ // 尝试打开应用 - 改进版本
|
|
|
+ function tryOpenApp() {
|
|
|
+ const deviceType = getDeviceType()
|
|
|
+ const browserType = getBrowserType()
|
|
|
+
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ let opened = false
|
|
|
+
|
|
|
+ // 设置超时检测
|
|
|
+ const timeout = setTimeout(() => {
|
|
|
+ if (!opened) {
|
|
|
+ resolve(false) // 未能打开应用
|
|
|
+ }
|
|
|
+ }, 2500)
|
|
|
+
|
|
|
+ // 监听页面可见性变化
|
|
|
+ const handleVisibilityChange = () => {
|
|
|
+ if (document.hidden) {
|
|
|
+ opened = true
|
|
|
+ clearTimeout(timeout)
|
|
|
+ resolve(true) // 应用可能已打开
|
|
|
+ document.removeEventListener('visibilitychange', handleVisibilityChange)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 监听页面失焦
|
|
|
+ const handleBlur = () => {
|
|
|
+ opened = true
|
|
|
+ clearTimeout(timeout)
|
|
|
+ resolve(true)
|
|
|
+ window.removeEventListener('blur', handleBlur)
|
|
|
+ }
|
|
|
+
|
|
|
+ document.addEventListener('visibilitychange', handleVisibilityChange)
|
|
|
+ window.addEventListener('blur', handleBlur)
|
|
|
+
|
|
|
+ // 尝试打开高德地图应用
|
|
|
+ if (deviceType === 'ios' && browserType === 'safari') {
|
|
|
+ // Safari优先使用Universal Links，然后是URL Scheme
|
|
|
+ window.location.href = UNIVERSAL_LINK || APP_SCHEME
|
|
|
+ } else if (deviceType === 'ios') {
|
|
|
+ // 其他iOS浏览器使用iframe方式
|
|
|
+ const iframe = document.createElement('iframe')
|
|
|
+ iframe.style.display = 'none'
|
|
|
+ iframe.src = APP_SCHEME
|
|
|
+ document.body.appendChild(iframe)
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ document.body.removeChild(iframe)
|
|
|
+ }, 1000)
|
|
|
+ } else {
|
|
|
+ // 非iOS设备使用Universal Link
|
|
|
+ window.location.href = UNIVERSAL_LINK
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 跳转到应用商店 - 只支持iOS
|
|
|
+ function openAppStore() {
|
|
|
+ const deviceType = getDeviceType()
|
|
|
+ const browserType = getBrowserType()
|
|
|
+
|
|
|
+ // 微信或QQ浏览器中，提示用户在外部浏览器打开
|
|
|
+ if (browserType === 'wechat' || browserType === 'qq') {
|
|
|
+ showWeChatGuide()
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (deviceType === 'ios') {
|
|
|
+ // iOS多种跳转方式
|
|
|
+ const iosStores = ['itms-apps://apps.apple.com/cn/app/id461703208', APP_STORE_URL]
|
|
|
+
|
|
|
+ tryMultipleUrls(iosStores)
|
|
|
+ } else {
|
|
|
+ // 非iOS设备直接打开网页版App Store
|
|
|
+ window.open(APP_STORE_URL, '_blank')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 尝试多个URL
|
|
|
+ function tryMultipleUrls(urls) {
|
|
|
+ let index = 0
|
|
|
+
|
|
|
+ function tryNext() {
|
|
|
+ if (index >= urls.length) {
|
|
|
+ // 所有URL都失败了，显示手动指引
|
|
|
+ showManualGuide()
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const url = urls[index]
|
|
|
+ index++
|
|
|
+
|
|
|
+ // 监听页面可见性变化
|
|
|
+ const handleVisibilityChange = () => {
|
|
|
+ if (document.hidden) {
|
|
|
+ // 成功跳转
|
|
|
+ document.removeEventListener('visibilitychange', handleVisibilityChange)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ document.addEventListener('visibilitychange', handleVisibilityChange)
|
|
|
+
|
|
|
+ // 尝试跳转
|
|
|
+ try {
|
|
|
+ window.location.href = url
|
|
|
+ } catch (e) {
|
|
|
+ console.log('跳转失败:', url, e)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果2秒后页面仍然可见，尝试下一个URL
|
|
|
+ setTimeout(() => {
|
|
|
+ document.removeEventListener('visibilitychange', handleVisibilityChange)
|
|
|
+ if (!document.hidden) {
|
|
|
+ tryNext()
|
|
|
+ }
|
|
|
+ }, 2000)
|
|
|
+ }
|
|
|
+
|
|
|
+ tryNext()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 显示微信引导
|
|
|
+ function showWeChatGuide() {
|
|
|
+ const guide = document.createElement('div')
|
|
|
+ guide.innerHTML = `
|
|
|
+ <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 9999; display: flex; align-items: center; justify-content: center;">
|
|
|
+ <div style="background: white; padding: 30px; border-radius: 15px; text-align: center; margin: 20px;">
|
|
|
+ <h3 style="margin-bottom: 20px; color: #333;">在外部浏览器中打开</h3>
|
|
|
+ <p style="margin-bottom: 20px; line-height: 1.6; color: #666;">
|
|
|
+ 请点击右上角的【⋯】菜单<br>
|
|
|
+ 选择【在浏览器中打开】<br>
|
|
|
+ 然后下载高德地图应用
|
|
|
+ </p>
|
|
|
+ <button onclick="this.parentElement.parentElement.remove()" style="background: #1989fa; color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer;">知道了</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `
|
|
|
+ document.body.appendChild(guide)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 显示手动指引
|
|
|
+ function showManualGuide() {
|
|
|
+ const deviceType = getDeviceType()
|
|
|
+ const storeName = deviceType === 'ios' ? 'App Store' : 'App Store'
|
|
|
+
|
|
|
+ alert(`请手动打开${storeName}，搜索"高德地图"进行下载。`)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 尝试打开应用的主函数
|
|
|
+ async function openApp() {
|
|
|
+ const loadingMsg = document.getElementById('loadingMsg')
|
|
|
+ const openAppBtn = document.getElementById('openAppBtn')
|
|
|
+ const deviceType = getDeviceType()
|
|
|
+ const browserType = getBrowserType()
|
|
|
+
|
|
|
+ loadingMsg.style.display = 'block'
|
|
|
+ openAppBtn.textContent = '检测中...'
|
|
|
+ openAppBtn.style.pointerEvents = 'none'
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 微信或QQ浏览器中直接提示跳转应用商店
|
|
|
+ if (browserType === 'wechat' || browserType === 'qq') {
|
|
|
+ loadingMsg.style.display = 'none'
|
|
|
+ openAppBtn.textContent = '下载高德地图应用'
|
|
|
+ openAppBtn.style.pointerEvents = 'auto'
|
|
|
+ openAppStore()
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 只在iOS设备上尝试打开应用
|
|
|
+ if (deviceType === 'ios') {
|
|
|
+ const appOpened = await tryOpenApp()
|
|
|
+
|
|
|
+ if (!appOpened) {
|
|
|
+ // 如果应用未打开，跳转到应用商店
|
|
|
+ setTimeout(() => {
|
|
|
+ openAppStore()
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 非iOS设备直接跳转到App Store
|
|
|
+ openAppStore()
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('打开应用时出错:', error)
|
|
|
+ openAppStore()
|
|
|
+ } finally {
|
|
|
+ loadingMsg.style.display = 'none'
|
|
|
+ openAppBtn.textContent = '打开高德地图应用'
|
|
|
+ openAppBtn.style.pointerEvents = 'auto'
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 复制链接功能
|
|
|
+ function copyCurrentUrl() {
|
|
|
+ const currentUrl = window.location.href
|
|
|
+ const successMsg = document.getElementById('successMsg')
|
|
|
+
|
|
|
+ if (navigator.clipboard && window.isSecureContext) {
|
|
|
+ // 现代浏览器
|
|
|
+ navigator.clipboard
|
|
|
+ .writeText(currentUrl)
|
|
|
+ .then(() => {
|
|
|
+ showSuccessMessage()
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error('复制失败:', err)
|
|
|
+ fallbackCopyTextToClipboard(currentUrl)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ // 兼容性处理
|
|
|
+ fallbackCopyTextToClipboard(currentUrl)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 兼容性复制方法
|
|
|
+ function fallbackCopyTextToClipboard(text) {
|
|
|
+ const textArea = document.createElement('textarea')
|
|
|
+ textArea.value = text
|
|
|
+ textArea.style.position = 'fixed'
|
|
|
+ textArea.style.left = '-999999px'
|
|
|
+ textArea.style.top = '-999999px'
|
|
|
+ document.body.appendChild(textArea)
|
|
|
+ textArea.focus()
|
|
|
+ textArea.select()
|
|
|
+
|
|
|
+ try {
|
|
|
+ const successful = document.execCommand('copy')
|
|
|
+ if (successful) {
|
|
|
+ showSuccessMessage()
|
|
|
+ } else {
|
|
|
+ alert('复制失败，请手动复制链接：' + text)
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ console.error('复制失败:', err)
|
|
|
+ alert('复制失败，请手动复制链接：' + text)
|
|
|
+ } finally {
|
|
|
+ document.body.removeChild(textArea)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 显示成功消息
|
|
|
+ function showSuccessMessage() {
|
|
|
+ const successMsg = document.getElementById('successMsg')
|
|
|
+ successMsg.style.display = 'block'
|
|
|
+ setTimeout(() => {
|
|
|
+ successMsg.style.display = 'none'
|
|
|
+ }, 3000)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 页面加载完成后的初始化
|
|
|
+ document.addEventListener('DOMContentLoaded', function () {
|
|
|
+ const openAppBtn = document.getElementById('openAppBtn')
|
|
|
+ const copyLinkBtn = document.getElementById('copyLinkBtn')
|
|
|
+ const deviceType = getDeviceType()
|
|
|
+ const browserType = getBrowserType()
|
|
|
+
|
|
|
+ // 绑定事件
|
|
|
+ openAppBtn.addEventListener('click', function (e) {
|
|
|
+ e.preventDefault()
|
|
|
+ openApp()
|
|
|
+ })
|
|
|
+
|
|
|
+ copyLinkBtn.addEventListener('click', function () {
|
|
|
+ copyCurrentUrl()
|
|
|
+ })
|
|
|
+
|
|
|
+ // 根据浏览器类型调整按钮文字
|
|
|
+ if (browserType === 'wechat' || browserType === 'qq') {
|
|
|
+ openAppBtn.textContent = '下载高德地图应用'
|
|
|
+ document.querySelector('.tip-text').innerHTML =
|
|
|
+ '📱 请点击右上角菜单选择"在浏览器中打开"<br>🔗 然后下载高德地图应用'
|
|
|
+ }
|
|
|
+
|
|
|
+ // 移动端不自动检测，避免被浏览器阻止
|
|
|
+ // 只有在桌面端才自动检测
|
|
|
+ if (deviceType === 'other') {
|
|
|
+ setTimeout(() => {
|
|
|
+ openApp()
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 处理页面可见性变化
|
|
|
+ document.addEventListener('visibilitychange', function () {
|
|
|
+ if (document.hidden) {
|
|
|
+ console.log('页面被隐藏，可能是应用打开了')
|
|
|
+ } else {
|
|
|
+ console.log('页面重新可见')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
