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:）已经过测试。

网络应用程序使用lat＆amp; amp;长

1 个答案: