使用 lat & long 从链接启动谷歌地图方向的 Web 应用程序

Question

我发现 following link 展示了如何创建链接以从网络应用程序启动导航。

我的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);

我想为每个浏览器/操作系统实现上述目标，但使用 lat/long 而不是地址。我找不到这方面的 url 结构示例。

感谢您的帮助。

Answer 1

首先，您的大部分代码仅显示地图上的位置，而不是到该位置的导航。我已经在下面的代码中改变了这一点。

现在回答你的问题。 以下内容未在所有设计上进行测试，但根据各自的文档。 它假设你有一个input 和id="lat" 和一个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，我再也找不到文档了，它是旧代码。 Android 和桌面 (default:) 已经过测试。