C g*_*ics 13 javascript navigation html5 android google-maps
我正在开发一个非常小的HTML5/javascript网站,由Android/iphone等设备的移动浏览器打开.我正在使用HTML5的地理位置来获取当前位置,但是一旦我有了,我想要导航到某个目的地.我想出的最好的是用户点击类似于以下链接的链接
https://maps.google.com/maps?saddr=london&daddr=paris
Run Code Online (Sandbox Code Playgroud)
但是,这不会打开导航应用程序,它只是切换到移动谷歌地图网站.有没有办法使用HTML5/javascript打开导航(GPS)应用程序?像这样的东西:
navigate:London to Paris
Run Code Online (Sandbox Code Playgroud)
Xav*_*ler 46
您可以使用地理位置链接在Android上打开导航应用.不幸的是,iOS不支持此功能.但一般情况下你必须记住,你不能直接控制在设备上如何处理这个链接,因为我说iOS什么都不做,甚至可能显示无效的链接错误,并且可能有Android设备也不支持此功能.请记住,您无法确定它是否可以在任何地方工作,因此您的网站不应该依赖于此功能,它应该只是支持此功能的设备的额外可用性.
使用地理链接,您可以指定如下位置:
geo:longitude,laditude
Run Code Online (Sandbox Code Playgroud)
或者像这样:
geo:street+address
Run Code Online (Sandbox Code Playgroud)
您还可以搜索这样的地址:
geo:?q=street+address
Run Code Online (Sandbox Code Playgroud)
您还可以像这样定义缩放级别:
geo:street+address?z=3
Run Code Online (Sandbox Code Playgroud)
并且还可以组合多个参数,如下所示:
geo:?q=street+address&z=15
Run Code Online (Sandbox Code Playgroud)
但请注意,这不会按预期工作.在这种情况下,在谷歌地图中,它以定义的缩放级别开始,然后开始搜索并放大目标.
这里有一些Android文档.
您还可以使用以下链接显示两个位置之间的路线:
http://maps.google.com/maps?saddr=street+adress&daddr=street+address
Run Code Online (Sandbox Code Playgroud)
坐标也适用于此:
http://maps.google.com/maps?saddr=50,10&daddr=50,20
Run Code Online (Sandbox Code Playgroud)
您可以再次使用它:
<a href="http://maps.google.com/maps?saddr=New+York&daddr=San+Francisco">Route New York --> San Francisco</a>
Run Code Online (Sandbox Code Playgroud)
使用此选项,链接将打开到某个位置的路径,设备不仅会显示路线,还会立即开始导航:
google.navigation:q=street+address
Run Code Online (Sandbox Code Playgroud)
您还可以使用坐标:
google.navigation:q=50,10
Run Code Online (Sandbox Code Playgroud)
你会像这样使用它:
<a href="google.navigation:q=San+Francisco">Navigation to San Francisco</a>
Run Code Online (Sandbox Code Playgroud)
我使用以下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>Run Code Online (Sandbox Code Playgroud)
经过大量的链接测试后,我已经为我解决了这个问题:
<a href="http://maps.google.com/maps?q=loc:
<lat>,<lng>&navigate=yes">nav</a>
这个是打开用户导航应用程序选择菜单,它传递您希望导航到的线索.
请享用
自从这个问题首次发布和回答以来,截至2017年10月,Google开发了一个名为Maps URL的API .
它是用于启动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 Pixel和我的iPhone上测试过它,它在每个移动设备上的工作方式都相同.
检查出的文档的其余部分比较实用的功能:https://developers.google.com/maps/documentation/urls/guide