有没有一种方法可以从移动浏览器中调用导航?

25

我正在开发一个非常小的HTML5/javascript网站,可以在像Android / iPhone这样的移动设备的浏览器中打开。我正在使用HTML5的地理位置功能来获取当前位置,但是一旦我获取到位置信息,我想要导航到某个目的地。我想到的最好办法是让用户点击类似以下链接的链接:

https://maps.google.com/maps?saddr=london&daddr=paris

然而这并不能打开导航应用,它只是切换到移动版的Google Maps网站。有没有办法使用HTML5 / javascript打开导航(GPS)应用程序?就像这样:

navigate:London to Paris

你的意思是想在设备上打开原生导航应用程序? - Xaver Kapeller
这个可以吗?https://dev59.com/0mw15IYBdhLWcg3wT51c?rq=1 - C graphics
2
但是像<a href="geo:50.066274, 10.754427;">位置在这里!</a>这样的简单HTML代码可以打开应用程序!请在Android上尝试,您会看到它会打开Google地图应用程序。 - C graphics
好的,谢谢,我会等待的。 - C graphics
3个回答

60

您可以使用地理链接在Android上打开导航应用程序,但很遗憾,iOS不支持此功能。总的来说,您需要记住,在设备上无法直接控制此链接的处理方式,就像我所说,iOS什么也不做,甚至可能显示无效的链接错误,而且可能还有不支持此功能的Android设备。请记住,您不能确定它在任何地方都能正常工作,因此您的网站不应依赖此功能,它应该只是对支持此功能的设备的额外可用性。

1) 在本机地图应用程序中显示位置

使用地理链接可以指定位置,如下:

geo:longitude,laditude

或者像这样:

geo:street+address

你也可以像这样搜索地址:

geo:?q=street+address

您也可以像这样定义缩放级别:

您也可以像这样定义缩放级别:

geo:street+address?z=3

还可以像这样组合多个参数:

geo:?q=street+address&z=15

但请注意,这种方法可能不会按照预期工作。在Google地图中,它首先以定义的缩放级别开始,然后开始搜索并缩放到目标位置。

这里有一些Android文档。

2) 在Google地图中打开路径

您还可以使用以下链接仅显示两个位置之间的路线:

http://maps.google.com/maps?saddr=street+adress&daddr=street+address

坐标也可以与这一功能一起使用:

http://maps.google.com/maps?saddr=50,10&daddr=50,20

您可以再次像这样使用它:

<a href="http://maps.google.com/maps?saddr=New+York&daddr=San+Francisco">Route New York --> San Francisco</a>   

3) 立即开始导航

使用此选项,链接将打开到某个位置的路线图,设备不仅会显示路线图,而且会立即开始导航:

google.navigation:q=street+address

您也可以使用坐标:

google.navigation:q=50,10

您可以像这样使用它:

<a href="google.navigation:q=San+Francisco">Navigation to San Francisco</a>  

4) 测试

我已经在运行Android 4.4 (KitKat)的Nexus 5上测试了以下HTML:

<!DOCTYPE html>
<html>

<head>
  <title>Geo Link Test</title>
</head>

<body>
  <p><a href="geo:50,10">Location 50/10</a></p>
  <p><a href="geo:Vienna">Location Vienna</a></p>
  <p><a href="geo:?z=5&q=New+York">Zoom 5, Search for New York</a></p>
  <p><a href="geo:?q=San+Francisco&z=15">Zoom 15, Search for San Francisco</a></p>
  <p><a href="google.navigation:q=San+Francisco">Navigation to San Francisco</a></p>
  <p><a href="google.navigation:q=50,10">Navigation to 50/10</a></p>
  <p><a href="http://maps.google.com/maps?saddr=New+York&daddr=San+Francisco">Route New York --> San Francisco</a></p>
  <p><a href="http://maps.google.com/maps?saddr=50,10&daddr=50,20">Route 50/10 --> 50/20</a></p>
</body>

</html>


格式geo:50,10?saddr=(50,10)&daddr=(47,5)不起作用!你能给一个实际的工作示例吗?(类似于:geo:latitude,longitude?z=zoom是可以的,但你提到的源/目标格式不起作用。想知道你从哪里得到的?) - C graphics
请您确认一下,谢谢。 - C graphics
不存在 geo:50,10?saddr=(50,10)&daddr=(47,5) 这样的东西。 - Waterfr Villa
@Cgraphics 我已经更新了我的答案,并在我的设备上进行了测试,提供更多信息。 - Xaver Kapeller
这里有另一个答案,可能会为此提供更多信息如何在用户单击链接时打开移动设备的地图应用程序? - AndyDaSilva52

12
自从这个问题首次发布并得到回答以来,截至2017年10月,Google已经开发了一个名为Maps URL的API。

它是一个通用的、跨平台的URL,可用于启动Google地图。

https://www.google.com/maps/dir/?api=1是包含导航功能的地图终点。

您可以添加以下参数:

  • 出发地:&origin=new+york
  • 目的地:&destination=san+fransisco
  • 导航:&dir_action=navigate

如果您省略了起点,则它将检测设备的位置,这对于导航可能更好:

https://www.google.com/maps/dir/?api=1&destination=san+fransisco&dir_action=navigate

这不会立即打开导航,但会带您进入 Google 地图页面,页面上会有导航图标,并给用户选择使用应用程序(或下载应用程序,如果他们没有安装)的选项。这似乎是一个不错的解决方案。我刚在我的浏览器、Google Pixel 和 iPhone 上测试了它,在每个移动设备上都可以正常工作。请查看其余文档以获取更多有用功能:https://developers.google.com/maps/documentation/urls/guide

11

经过大量链接测试,我已经解决了它:

<a href="http://maps.google.com/maps?q=loc: <lat>,<lng>&navigate=yes">nav</a>

这个链接可以打开用户导航应用程序并选择菜单,然后将您希望导航到的坐标传递给它。

享受吧。


它不会直接开始导航。已尝试Android和iOS。 - Daniel Birowsky Popeski
是的...这就是我一直在寻找的...使用经纬度进行直接导航。 - REMITH

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接