android - 创建一个链接，在任何设备上打开相应的 map 应用程序，并提供前往目的地的路线

Question

我宁愿认为这不会那么难找到，但看起来要找到一篇很棒的跨设备文章并不容易，就像你所期望的那样。

我想创建一个链接，可以打开移动设备的浏览器并浏览谷歌地图，或者打开 map 应用程序(Apple Maps 或 Google Maps)并直接开始路线，即:从当前位置开始，结束于给定点(纬度/经度)。

我可以在两台设备上进行测试(除了 browserstack)，Android 和 iPhone。

以下链接仅适用于 Android:

<a href="http://maps.google.com/maps?daddr=lat,long&amp;ll=">Take me there!</a>

在 iPhone 的 Chrome 中单击此链接，这奇怪地打开了桌面版的谷歌地图，并在移动应用程序上显示广告...

这仅适用于 iOS，打开 Apple map 要求我输入起始位置(我可以选择“当前位置”)并开始路线 = 所需行为。在 Android 上单击此链接完全失败:

<a href="maps://maps.google.com/maps?daddr=lat,long&amp;ll=">Take me there!</a>

注意 maps://协议(protocol)。

有没有一种优雅的跨设备方式来创建这样的链接？ 一个适用于所有主要手机的链接？

谢谢

更新:找到解决方案(有点)

这是我想出的。这和我想象的不太一样，虽然它有效。

var ua = navigator.userAgent.toLowerCase(),
    plat = navigator.platform,
    protocol = '',
    a,
    href;

$.browser.device = ua.match(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera/i) ? ua.match(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera/i)[0] : false;


if ($.browser.device) {
    switch($.browser.device) {
        case 'iphone':
        case 'ipad':
        case 'ipod':
            function iOSversion() {
              if (/iP(hone|od|ad)/.test(navigator.platform)) {
                // supports iOS 2.0 and later: <http://bit. ly/TJjs1V>
                var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
                return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
              }
            }

            var ver = iOSversion() || [0];

            if (ver[0] >= 6) {
              protocol = 'maps://';
            }
            else {
                protocol = 'http://maps.google.com/maps';
            }
        break;

        case 'android':
        default:
            protocol = 'http://maps.google.com/maps';
        break;
    }

a.attr('href', protocol + href)

maps://协议(protocol)是苹果 map 应用程序的 url 方案，它只会在 ios 6 或更高版本上开始工作。有一些方法可以测试是否安装了 gmaps，然后选择如何处理 url，但这对于我的 Intent 来说有点太多了。所以我最终使用上述参数创建了一个 maps://或 maps.google.com/链接。

** 更新 **

遗憾的是，$.browser.device 自 jquery 1.9 起无法使用 (来源 - http://api.jquery.com/jquery.browser)

Answer 1

我在手机方面工作不多，所以我不知道这是否可行。但仅从 html/javascript 的角度来看，您可以根据用户的设备打开不同的 url？

<a style="cursor: pointer;" onclick="myNavFunc()">Take me there!</a>

function myNavFunc(){
    // If it's an iPhone..
    if( (navigator.platform.indexOf("iPhone") != -1) 
        || (navigator.platform.indexOf("iPod") != -1)
        || (navigator.platform.indexOf("iPad") != -1))
         window.open("maps://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=[YOUR_LAT],[YOUR_LNG]");
    else
         window.open("https://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=[YOUR_LAT],[YOUR_LNG]");
}