地理位置谷歌地图链接jQuery

Question

当我点击手机上的链接时，我希望提示用户是否愿意允许检测该位置，如果是，请打开Google地图，其中包含从当前位置到最终目的地的路线。

这就是我所拥有的，但是当我单击链接时，它会转到回退默认链接。

<a class="geo" href="http://maps.google.com/maps?ll=40.822419,-73.993124">Get Directions</a>
$("a.geo").click(function(e)) {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(getLoc, handle_errors);
    }
    e.preventDefault();
});
function getLoc(position) {
    var geoLat = position.coords.latitude;
    var geoLon = position.coords.longitude;
    var gmapLink = "http://maps.google.com/maps?saddr=" + geoLat + "," + geoLon + "&daddr=40.822419,-73.993124";
    $("a.geo").attr("href", gmapLink);
}

用户

单击链接后，如何将 href 替换为具有用户位置的新链接？

Answer 1

替换更改href属性的行：

$("a.geo").attr("href", gmapLink);

使用重定向：

window.location.assign(gmapLink);

将e.preventDefault()移动到if (navigator.geolocation)块内也是值得的，这样如果没有可用的地理位置，用户仍然可以访问谷歌地图并可以自己插入他们的位置。

Answer 2

以下内容对我有用。请注意，我将上下文代理到 getLoc 函数，因此 $（this） 仍然是我们在获取回调时按下的链接，并添加了一个单击触发器以实际单击链接。另一种解决方案是使用 window.location。

$("a.geo").click(function(e) {               
    if (navigator.geolocation) {
        e.preventDefault();
        navigator.geolocation.getCurrentPosition(
             $.proxy( getLoc, $(this) )                    
            , handle_errors);          
    }
});
function getLoc(position) {                     
    var geoLat = position.coords.latitude;
    var geoLon = position.coords.longitude;
    var gmapLink = "http://maps.google.com/maps?saddr=" + geoLat + "," + geoLon + "&daddr=40.822419,-73.993124";        
    $(this).attr("href", gmapLink);
    $(this).trigger('click');
}