wangfumin
/
swkz


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505
							<!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>