Html 当用户单击链接时如何打开移动设备的地图应用程序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9688607/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to open a mobile device's map app when a user clicks on a link?
提问by Sal
I have a web app where if a user clicks on a link it should open up a map. The best solution that I can think of is to open up a new tab/window to google maps using the target="_blank"attribute.
我有一个网络应用程序，如果用户点击链接，它应该打开一个地图。我能想到的最佳解决方案是使用该target="_blank"属性为谷歌地图打开一个新标签/窗口。
But I think that it would be best to open up the device's map appinstead of google map.
但我认为最好打开设备的地图应用程序而不是谷歌地图。
I know that you can have the user's phone app to pop when the user clicks on a phone number with the href attribute pointing to tel:<the phone number>. I am wondering if this is also possible with the map app.
我知道当用户点击一个带有 href 属性指向的电话号码时，你可以让用户的电话应用程序弹出tel:<the phone number>。我想知道地图应用程序是否也可以这样做。
Is there a way to allow an anchor tag to open the mobile device's map app when the user clicks it?
有没有办法在用户单击时允许锚标记打开移动设备的地图应用程序？
采纳答案by Alex W
You can use the GEO URI Scheme"geo:latitude,longitude" specified by RFC 5870in a link such as
您可以在链接中使用RFC 5870指定的GEO URI 方案“geo:latitude,longitude”，例如
<a href="geo:124.028582,-29.201930" target="_blank">Click here for map</a>
There's also the comgooglemaps:, which launches the Google Maps app for iOS, for example:
还有comgooglemaps:，它会启动适用于 iOS的Google Maps 应用程序，例如：
comgooglemaps://?center=40.765819,-73.975866&zoom=14&views=traffic
Where
在哪里
center: This is the map viewport center point. Formatted as a comma separated string oflatitude,longitude.mapmode: Sets the kind of map shown. Can be set to:standardorstreetview. If not specified, the current application settings will be used.views: Turns specific views on/off. Can be set to:satellite,traffic, ortransit. Multiple values can be set using a comma-separator. If the parameter is specified with no value, then it will clear all views.zoom: Specifies the zoom level of the map.
center：这是地图视口中心点。格式化为逗号分隔的latitude,字符串longitude。mapmode：设置显示的地图类型。可以设置为：standard或streetview。如果未指定，将使用当前应用程序设置。views：打开/关闭特定视图。可以设置为：satellite、traffic、 或transit。可以使用逗号分隔符设置多个值。如果该参数未指定任何值，则将清除所有视图。zoom：指定地图的缩放级别。
And as techtheatre said, you can use a regular Apple Maps link to trigger Apple Maps:
正如 techtheatre 所说，您可以使用常规的 Apple Maps 链接来触发 Apple Maps：
//maps.apple.com/?q=Raleigh,NC
Leaving off the protocol will automatically select the correct one to use, so if you wanted to have a dynamic link you could just create some conditional code that changes the link between google.comand apple.comdepending on which system you're on.
离开关协议会自动选择一个正确的使用，所以如果你想有你可以只创建之间的更改链接一些有条件的代码中的动态链接google.com，并apple.com根据其系统你上。
回答by techtheatre
Actually...now that Apple has their own map application, they no longer catch Google maps links and route them into the mapping application (by default...though this can be changed on the device). As such, you now must do some sniffing to determine if the device is Android or Apple. If you use the correct link for the correct mobile OS, the device will catch the intent and instead of using the browser, will go into the mapping app.
实际上......现在Apple拥有自己的地图应用程序，他们不再捕获谷歌地图链接并将它们路由到地图应用程序（默认情况下......尽管可以在设备上更改）。因此，您现在必须进行一些嗅探以确定设备是 Android 还是 Apple。如果您为正确的移动操作系统使用正确的链接，设备将捕捉意图，而不是使用浏览器，而是进入地图应用程序。
If Android, link like this:
如果是安卓，链接如下：
https://maps.google.com/?q=Houston,+TX
If Apple, link like this:
如果是苹果，链接如下：
http://maps.apple.com/?q=Houston,+TX
This is certainly a pain, and hopefully the W3c will eventually standardize a map trigger (like tel: for phone numbers). Good luck!
这当然很痛苦，希望 W3c 最终会标准化地图触发器（如电话号码的 tel:）。祝你好运！
回答by Vincent
No need for anything fancy. You can simply double link the address like so.
不需要任何花哨的东西。您可以像这样简单地双重链接地址。
<a href='https://maps.google.com/?q=addressgoeshere'>
<a href='https://maps.apple.com/maps?q=addressgoeshere'>
Address</a></a>
On Android this will open the Google maps app, and on iOS this will open the Apple maps app. (Untested on Windows phone)
在 Android 上，这将打开 Google 地图应用程序，在 iOS 上，这将打开 Apple 地图应用程序。（未在 Windows 手机上测试）
回答by Scot Nery
Here's my jQuery solution for this issue. I wanted to be able to detect the correct map to open up. In 2019, microformats still don't automatically make a link for mobile phones.
这是我针对此问题的 jQuery 解决方案。我希望能够检测到要打开的正确地图。2019 年，微格式仍然不会自动为手机建立链接。
I used the solution from this article https://medium.com/@colinlord/opening-native-map-apps-from-the-mobile-browser-afd66fbbb8a4but modified it to make it current and dynamic.
我使用了本文https://medium.com/@colinlord/opening-native-map-apps-from-the-mobile-browser-afd66fbbb8a4 中的解决方案，但对其进行了修改以使其具有最新性和动态性。
And, modified the code so I could have an address block in my html. That address is stripped to the basics and sent to the appropriate maps app.
并且，修改了代码，以便我的 html 中有一个地址块。该地址被剥离到基本信息并发送到适当的地图应用程序。
HTML
HTML
<span class="map-link">6555 Hollywood Blvd<br/>Hollywood, CA 90028</span>
JavaScript
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
CSS
.map-link { text-decoration: underline; text-decoration-style: dotted;cursor: pointer ;}
.map-link:hover { text-decoration-style:solid;}
回答by user2515235
For me, the best answer was to standardize a map tag, such as "MAP:".
对我来说，最好的答案是标准化地图标签，例如“MAP：”。
Then to make an address invoke maps, preface it with MAP:.
然后要使地址调用映射，请以MAP:.
So to tell a friend where something is, use something like: Map: 123 any street PA 98234.
所以要告诉朋友，其中一些是，使用这样的：Map: 123 any street PA 98234。
Then when the address is clicked (for a phone, tapped), the default mapping app is invoked.
然后当地址被点击（对于电话，点击）时，默认的地图应用程序被调用。
Added from comment:
从评论中添加：
The idea was for e-mail and texting, however if you want a code example, this works on android:
这个想法是用于电子邮件和短信，但是如果你想要一个代码示例，这适用于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);
}
回答by Evgeny Rychkov
Yep, tags like data-type etc. did not work for me as well. I used direct link from Google (you can choose "share point" and it will give direct html which will point to the location).
是的，数据类型等标签对我也不起作用。我使用了来自 Google 的直接链接（您可以选择“共享点”，它将提供指向该位置的直接 html）。
It will open google maps in browser.
它将在浏览器中打开谷歌地图。
