有没有办法从移动浏览器调用导航？

Posted 2023-04-13

技术标签:

【中文标题】有没有办法从移动浏览器调用导航？【英文标题】：Is there a way to invoke navigation from mobile browser? 【发布时间】：2014-06-07 13:50:00 【问题描述】：

我正在开发一个非常小的 html5/javascript 网站，可以通过 android / iphone 等设备的移动浏览器打开。我正在使用 HTML5 的地理位置来获取当前位置，但是一旦有了，我就想导航到某个目的地。我想出的最好的方法是用户点击类似于下面链接的链接

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

然而，这并没有打开导航应用程序，它只是切换到移动谷歌地图网站。有没有办法使用 HTML5/javascript 打开导航 (GPS) 应用程序？像这样的：

navigate:London to Paris

【问题讨论】：

你的意思是要在设备上打开原生导航应用？这样不行吗？ ***.com/questions/6703349/… 但是像 Location here! 这样的简单 html 代码会打开应用程序！请在 android 上尝试一下，您会看到它会打开应用程序 google map 好的，谢谢，我会等 【参考方案1】：

您可以使用地理链接在 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 地图中，它从定义的缩放级别开始，然后开始搜索并放大目标。

Here 是一点点 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) 测试

我已经使用以下 HTML 在运行 Android 4.4 (KitKat) 的 Nexus 5 上测试了所有内容：

<!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 很好，但你提到的源/目标格式不起作用。想知道你从哪里得到它？您能确认一下吗没有geo:50,10?saddr=(50,10)&daddr=(47,5)这样的东西 @Cgraphics 我已经用更多信息更新了我的答案，并在我的设备上测试了所有内容。还有另一个答案可能会添加更多关于它的信息How to open a mobile device's map app when a user clicks on a link?【参考方案2】：

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

这是一个用于启动谷歌地图的通用、跨平台 URL。

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 Pixel 和我的 iPhone 上对其进行了测试，它在每台移动设备上的工作方式都是一样的。

查看文档的其余部分以了解更多有用的功能：https://developers.google.com/maps/documentation/urls/guide

【讨论】：

【参考方案3】：

经过大量链接测试后，我已经为我解决了：