Question

我有一个网络应用，如果用户点击链接，它应该打开一张地图。我能想到的最佳解决方案是使用target="_blank"属性打开谷歌地图的新标签/窗口。

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

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

当用户点击它时，是否有办法允许锚标记打开移动设备的地图应用？

Answer 1

您可以在

等链接中使用由GEO URI Scheme指定的RFC 5870“geo：latitude，longitude”

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

还有comgooglemaps:，它会启动Google Maps app for 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

这是我针对此问题的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
    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 4

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

<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 Phone测试）

Answer 5

在 2020 中使用以下子域：https://maps.app.goo.gl/pQAhDLJDNaYQJ9Np7

分享地点时，您可以从地图应用中获取它。

在浏览器/ Android / Iphone上工作

Answer 6

对我来说，最好的答案是标准化地图标记，例如“MAP：”。

然后使地址调用地图，以MAP:为前缀。

所以要告诉朋友某事情在哪里，请使用以下内容：Map: 123 any street PA 98234。

然后，当点击地址时（对于手机，点击），将调用默认的地图应用。

从评论中添加：

这个想法是用于电子邮件和短信，但是如果你想要一个代码示例，这适用于android：

try
{
    String uri = "geo:0,0?q=" + Address;
    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(uri));
    intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
    getApplicationContext().startActivity(intent);
}
catch (SecurityException es)
{
    if (LOG) Log.e("Dbg", "Map failed", es);
}
catch (ActivityNotFoundException e)
{
    if (LOG) Log.e("Dbg", "Map failed", e);
}

Answer 7

是的，数据类型等标签对我来说也不起作用。我使用了Google的直接链接（您可以选择＆＃34;分享点＆＃34;它会直接显示指向该位置的html）。

它将在浏览器中打开谷歌地图。

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

7 个答案: