如何在用户点击链接时打开移动设备的地图应用？

Question

我有一个网络应用程序,如果用户点击链接,它应该打开一个地图.我能想到的最佳解决方案是使用该target="_blank"属性打开谷歌地图的新选项卡/窗口.

但我认为最好打开设备的地图应用程序而不是谷歌地图.

我知道当用户点击href属性指向的电话号码时,您可以弹出用户的手机应用程序tel:<the phone number>.我想知道这是否也可以使用地图应用程序.

有没有办法允许锚标签在用户点击它时打开移动设备的地图应用程序？

Answer 1

您可以在诸如的链接中使用RFC 5870指定的GEO URI Scheme "geo:latitude,longitude"

<a href="geo:124.028582,-29.201930" target="_blank">Click here for map</a>

还有comgooglemaps:,它启动了iOS版谷歌地图应用程序,例如:

comgooglemaps://?center=40.765819,-73.975866&zoom=14&views=traffic

哪里

• center:这是地图视口中心点.格式化为逗号分隔的字符串latitude,longitude.
• mapmode:设置显示的地图类型.可以设置为:standard或streetview.如果未指定,将使用当前的应用程序设置.
• views:打开/关闭特定视图.可以设置为:satellite,traffic,或transit.可以使用逗号分隔符设置多个值.如果指定的参数没有值,则它将清除所有视图.
• zoom:指定地图的缩放级别.

正如techtheatre所说,您可以使用常规Apple Maps链接触发Apple Maps:

//maps.apple.com/?q=Raleigh,NC

离开协议将自动选择要使用的正确协议,因此如果您想要一个动态链接,您可以创建一些条件代码来改变它们之间的链接google.com,apple.com具体取决于您所在的系统.

Answer 2

实际上......现在Apple拥有自己的地图应用程序,他们不再捕获Google地图链接并将它们路由到地图应用程序中(默认情况下......虽然可以在设备上更改).因此,您现在必须进行一些嗅探以确定该设备是Android还是Apple.如果您为正确的移动操作系统使用正确的链接,设备将捕获意图而不是使用浏览器,将进入地图应用程序.

如果Android,请链接如下:

https://maps.google.com/?q=Houston,+TX

如果Apple,请链接如下:

http://maps.apple.com/?q=Houston,+TX

这肯定是一种痛苦,希望W3c最终能够标准化地图触发器(如tel:for phone numbers).祝好运!

Answer 3

不需要任何花哨的东西。您可以像这样简单地双重链接地址。

<a href='https://maps.google.com/?q=addressgoeshere'>
  <a href='https://maps.apple.com/maps?q=addressgoeshere'>
    Address</a></a>

在 Android 上，这将打开 Google 地图应用程序，在 iOS 上，这将打开 Apple 地图应用程序。（未在 Windows 手机上测试）

Answer 4

这是我针对此问题的 jQuery 解决方案。我希望能够检测到要打开的正确地图。2019 年，微格式仍然不会自动为手机建立链接。

我使用了本文https://medium.com/@colinlord/opening-native-map-apps-from-the-mobile-browser-afd66fbbb8a4 中的解决方案，但对其进行了修改以使其具有最新性和动态性。

并且，修改了代码，以便我的 html 中有一个地址块。该地址被剥离到基本信息并发送到适当的地图应用程序。

HTML

<span class="map-link">6555 Hollywood Blvd<br/>Hollywood, CA 90028</span>

JavaScript

$(document).on('click','.map-link',function() {
    var address = $(this).html();
    address = $('<div/>')
      .html(address)
      .text() // strip tags
      .replace(/\s\s+/g, " "); // remove spaces
    address = encodeURIComponent(address);
    if ((navigator.platform.indexOf('iPhone') != -1) || (navigator.platform.indexOf('iPad') != -1) || (navigator.platform.indexOf('iPod') != -1)){/* if we're on iOS, open in Apple Maps */
        window.open('http://maps.apple.com/?q=' + address);
    } else { /* else use Google */
        window.open('https://maps.google.com/maps?q=' + address);
    }
});

CSS

.map-link { text-decoration: underline; text-decoration-style: dotted;cursor: pointer ;}
.map-link:hover { text-decoration-style:solid;}

Answer 5

在这里参加一个旧聚会..但是，2021 年我仍在为此苦苦挣扎：D

看来使用以下链接

http://maps.apple.com/?q=Houston,+TX

在苹果设备上打开苹果地图，在非苹果设备上打开谷歌地图。谢谢苹果！