Web应用程序使用纬度和经度从链接启动谷歌地图方向

Question

我找到了以下链接，显示了如何创建链接以从Web应用程序启动导航。

我的JS代码是：

// Build "ask for directions" url based on browser / OS type
function directionsButton(found) {
    if (found) {
        // Detect type of device to prepare URL for map directions
        switch(true) {
            case (/ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = 'maps:?saddr=Current Location&daddr=' + $('#address1').val() + ' ' + $('#address2').val() + ' ' + $('#city').val() + ' ' + $('#state').val() + ' ' + $('#postcode').val() + ' ' + $('#country_id option:selected').text();
                break;
            case (/windows phone 7/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = 'maps:' + $('#address1').val() + $('#address2').val() + ' ' + $('#city').val() + ' ' + $('#state').val() + ' ' + $('#postcode').val() + ' ' + $('#country_id option:selected').text();
                break;
            case (/windows phone 8/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = 'bingmaps:?where=' + $('#address1').val() + ' ' + $('#address2').val() + ' ' + $('#city').val() + ' ' + $('#state').val() + ' ' + $('#postcode').val() + ' ' + $('#country_id option:selected').text();
                break;
            case (/android/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = 'geo:' + $('#address1').val() + ' ' + $('#address2').val() + ' ' + $('#city').val() + ' ' + $('#state').val() + ' ' + $('#postcode').val() + ' ' + $('#country_id option:selected').text();
                break;
            case (/blackberry/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = "javascript:blackberry.launch.newMap({'address':{'address1':'" + $('#address1').val() + ' ' + $('#address2').val() + "','city':'" + $('#city').val() + "','country':'" + $('#country_id option:selected').text() + "','stateProvince':'"  + $('#state').val() + "','zipPostal':'" + $('#postcode').val() + "'}})";
                break;
            default:
                var directionsUrl = 'http://maps.google.com?q=' + $('#address1').val() + ' ' + $('#address2').val() + ' ' + $('#city').val() + ' ' + $('#state').val() + ' ' + $('#postcode').val() + ' ' + $('#country_id option:selected').text();
        }
        $('#directions-button').attr('href', directionsUrl);
        $('#directions-button').prop('disabled', false);
    } else {
        $('#directions-button').attr('href', '#');
        $('#directions-button').prop('disabled', true);
    }
}

在谷歌地图像这样解析地址后，我调用了上述函数（用于成功的地图地址地理编码）：

directionsButton(true);

我想为每个浏览器/操作系统实现上述目标，但使用纬度/经度而不是地址。我找不到为此的网址结构示例。

感谢您的任何帮助。

Answer 1

首先，大多数代码仅显示地图上的位置，而不显示到该位置的导航。我已经在下面的代码中更改了它。

现在回答你的问题。以下内容并未在所有设备上进行测试，而是根据相应的文档进行测试。它假设您有一个id="lat"的input和一个id="lng"：

// Build "ask for directions" url based on browser / OS type
function directionsButton(found) {
    if (found) {
        // Detect type of device to prepare URL for map directions
        switch(true) {
            case (/ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = 'https://maps.google.com/?saddr=Current+Location&daddr=loc:' + $('#lat').val() + ',' + $('#lng').val();
                break;
            case (/windows phone 7/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = 'maps:' + $('#lat').val() + ',' + $('#lng').val();
                break;
            case (/windows phone 8/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = 'ms-drive-to:?destination.latitude=' + $('#lat').val() + '&destination.longitude=' + $('#lng').val();
                break;
            case (/android/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = 'google.navigation:q=' + $('#lat').val() + ',' + $('#lng').val();
                break;
            case (/blackberry/i.test(navigator.userAgent.toLowerCase())):
                var directionsUrl = "javascript:blackberry.launch.newMap({'nav_end':{'latitude':" + $('#lat').val() + ",'longitude':" + $('#lng').val() + "}})";
                break;
            default:
                var directionsUrl = 'https://maps.google.com?daddr=loc:' + $('#lat').val() + ',' + $('#lng').val();
        }
        $('#directions-button').attr('href', directionsUrl);
        $('#directions-button').prop('disabled', false);
    } else {
        $('#directions-button').attr('href', '#');
        $('#directions-button').prop('disabled', true);
    }
}

使用的文档：

• 黑莓：https://developer.blackberry.com/native/documentation/device_platform/invocation/maps.html
• iOS：https://developer.apple.com/library/content/featuredarticles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html
• Windows Phone 8：https ：//msdn.microsoft.com/en-us/windows/uwp/launch-resume/launch-maps-app （我需要 10 的声誉才能发布超过 2 个链接）

对于Windows Phone 7，我再也找不到文档了，它是旧代码。安卓和桌面（default:）经过测试。