如何为所有移动设备创建一个链接，以打开以当前位置为起点并以给定位置为起点的路线的Google地图？

88

我宁愿以为要发现这个问题并不难，但是似乎很难像您期望的那样找到很棒的跨设备文章。

我想创建一个链接，该链接可以打开移动设备的浏览器并浏览到Google地图，也可以打开地图应用（Apple Maps或Google Maps）并直接开始路线，即：从当前位置开始，在给定点结束（纬度/经度）。

我可以在两个设备（浏览器堆栈旁边），Android和iPhone上进行测试。

以下链接仅适用于Android：

<a href="http://maps.google.com/maps?daddr=lat,long&amp;ll=">Take me there!</a>

点击iPhone的Chrome中的此链接，这会奇怪地打开桌面版Google Maps，并在移动应用中展示广告...

这仅适用于iOS，打开Apple Maps要求我输入一个起始位置（我可以选择“当前位置”）并开始该路线=所需的行为。在Android上，完全无法点击此链接：

<a href="maps://maps.google.com/maps?daddr=lat,long&amp;ll=">Take me there!</a>

注意maps：//协议。

有没有一种优雅的跨设备方式来创建这样的链接？一个适用于所有主要手机的链接？

谢谢

更新：找到解决方案（种类）

这是我想出的。尽管可以正常工作，但它并非我想象的那样。

var ua = navigator.userAgent.toLowerCase(),
    plat = navigator.platform,
    protocol = '',
    a,
    href;

$.browser.device = ua.match(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera/i) ? ua.match(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera/i)[0] : false;


if ($.browser.device) {
    switch($.browser.device) {
        case 'iphone':
        case 'ipad':
        case 'ipod':
            function iOSversion() {
              if (/iP(hone|od|ad)/.test(navigator.platform)) {
                // supports iOS 2.0 and later: <http://bit. ly/TJjs1V>
                var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
                return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
              }
            }

            var ver = iOSversion() || [0];

            if (ver[0] >= 6) {
              protocol = 'maps://';
            }
            else {
                protocol = 'http://maps.google.com/maps';
            }
        break;

        case 'android':
        default:
            protocol = 'http://maps.google.com/maps';
        break;
    }

a.attr('href', protocol + href)

该maps://协议是Apple Maps应用程序的url方案，它将仅在ios 6或更高版本上开始工作。有多种方法可以测试是否安装了gmaps，然后选择要处理的url，但这对我的意图来说实在太多了。因此，我最终使用上述参数创建了一个maps：// OR maps.google.com/链接。

**更新**

可悲的是，$ .browser.device不要因为工作的jQuery 1.9（来源- http://api.jquery.com/jquery.browser）

android  html  ios  google-maps  mobile 
— 亚历克斯
source
1
您使用哪种服务器端语言？您可以使用用户代理嗅探解决此问题。
— Uooo
我知道我可以，但是我想做一个跨浏览器。我有PHP和JS
— Alex
@Alex-您如何将其翻译为在台式机上工作？这样就maps.google.com可以在Android和台式机以及maps:// iOS上使用。
— kaoscify
@Alex-我不断收到错误消息，说a（最后一行）未定义。我在infoWindow中有一个URL，需要根据所使用的设备进行更改。
— kaoscify
1
我发现没有答案在检测平台（不是浏览器）方面确实发挥了很大作用，所以我找到了PgwBrowser，它是一个jQuery插件，可以检测平台（例如台式机，移动设备），浏览器，甚至是操作系统。压缩并压缩后，其大小也> 2 KB。有了它，我可以简单地在一条switch语句中检查os.group并据此路由浏览器。
— filoxo

Answers:

92

嗯，我在手机上工作不多，所以我不知道这是否可行，但是仅从html / javascript的角度来看，您能否根据用户的设备打开另一个URL？

<a style="cursor: pointer;" onclick="myNavFunc()">Take me there!</a>

function myNavFunc(){
    // If it's an iPhone..
    if( (navigator.platform.indexOf("iPhone") != -1) 
        || (navigator.platform.indexOf("iPod") != -1)
        || (navigator.platform.indexOf("iPad") != -1))
         window.open("maps://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=[YOUR_LAT],[YOUR_LNG]");
    else
         window.open("https://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=[YOUR_LAT],[YOUR_LNG]");
}
— 詹姆士
source
您和Alex Pretzlav的答案是最适合我的答案，但是您的答案更多地指向使用javascript时的外观，谢谢。我将更新我的帖子以提供最终解决方案
— Alex
1
大约一年前，我对此进行了很多研究，可以告诉您，使用maps.apple.com/?q=Mexican+Restaurant将重定向到google页面（尝试！），但有设备的情况除外苹果地图应用程序，它将改为打开该应用程序。对于其他所有内容，它将打开google maps应用程序/页面。赏金
— Worthy7 '16
具体是什么，你正在寻找的是这样的：maps.apple.com/?daddr=San+Francisco&dirflg=d&t=h 和文档是在这里：developer.apple.com/library/content/featuredarticles/...
— Worthy7
@ Worthy7显然没有经过测试，但是在android上，maps.apple.com / *将重定向到google maps网站，而maps.google.com/*将允许您选择本地地图应用程序。
— 詹姆斯，
我强烈建议您使用此答案在Android而不是新的浏览器页面上打开用户地图应用程序！
— PaulCo '18
23

有趣的是，http://maps.apple.com链接将直接在iOS设备上的Apple Maps中打开，或者直接重定向到Google Maps（然后在Android设备上被拦截），因此您可以精心制作一个谨慎的URL，在两种情况下都可以使用“苹果地图”网址，例如：

http://maps.apple.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA

或者，您可以直接使用Google Maps网址（不使用/mapsURL组件）在Android设备上直接在Google Maps中打开，或在iOS设备上在Google Maps的移动网络中打开：

http://maps.google.com/?daddr=1+Infinite+Loop,+Cupertino+CA

— 亚历克斯·普雷茨拉夫
source
1
因此，我拿起Android手机，打开了Google Chrome浏览器，然后输入了URL http://maps.google.com/。它只是在Web浏览器中的URL中打开了该URL。我希望它可以打开Google Maps应用程序。Alex Pretzlav，我是否误解了你在这里写的内容？;-)
— Leo
3
当直接在浏览器中输入@Leo时，Android处理URL的方式与单击链接时不同。尝试通过电子邮件给自己发送一个Google Maps URL，例如maps.google.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA，然后从您的电子邮件客户端中点击它。
— Alex Pretzlav 2014年
谢谢@AlexPretzlav。是的，他们有一些工作要做，以使事情在一起。有没有新兴的标准？
— 2014年
1
将其发布为URL，以便我可以在android maps.apple.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA上进行测试 上面的URL重定向到我android上的google maps（网站），而maps.google.com允许我在Android手机上打开许多不同方向的应用。
— 拉斐尔
14

刚刚碰到这个问题，并在这里找到了所有答案，我采用了上面的一些代码，并制作了可在android和iphone上使用的简单js函数（它几乎支持所有android和iphone）。

  function navigate(lat, lng) {
    // If it's an iPhone..
    if ((navigator.platform.indexOf("iPhone") !== -1) || (navigator.platform.indexOf("iPod") !== -1)) {
      function iOSversion() {
        if (/iP(hone|od|ad)/.test(navigator.platform)) {
          // supports iOS 2.0 and later
          var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
          return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
        }
      }
      var ver = iOSversion() || [0];

      var protocol = 'http://';
      if (ver[0] >= 6) {
        protocol = 'maps://';
      }
      window.location = protocol + 'maps.apple.com/maps?daddr=' + lat + ',' + lng + '&amp;ll=';
    }
    else {
      window.open('http://maps.google.com?daddr=' + lat + ',' + lng + '&amp;ll=');
    }
  }

的HTML： 

 <a onclick="navigate(31.046051,34.85161199999993)" >Israel</a>
— 塔尔西伯尼
source
10

这适用于所有设备[iOS，Android和Window Mobile 8.1]。

无论如何看起来都不是最好的方法...但是再简单不过了:)

<a href="bingmaps:?cp=18.551464~73.951399">
 <a href="http://maps.apple.com/maps?q=18.551464, 73.951399"> 
   Open Maps
 </a>
</a>

http://jsbin.com/dibeq

— 迪帕克森
source
很干净，很容易。在多个设备上测试。工作顺利！非常感谢您：D
— lzoesch '16
但这只会打开苹果地图。如果您使用的是Android手机，那不是很酷。
— superluminary
1
@Kristopher-它会打开Goog​​le地图应用吗？
— superluminary
@superluminary确实确实很奇怪。
— 克里斯托弗
您将如何使用它来传递地址而不是坐标？
— 文森特
6 
if (navigator.geolocation) { //Checks if browser supports geolocation
navigator.geolocation.getCurrentPosition(function (position) {                                                                                            
 var latitude = position.coords.latitude;                    //users current
 var longitude = position.coords.longitude;                 //location
 var coords = new google.maps.LatLng(latitude, longitude); //Creates variable for map coordinates
 var directionsService = new google.maps.DirectionsService();
 var directionsDisplay = new google.maps.DirectionsRenderer();
 var mapOptions = //Sets map options
 {
   zoom: 15,  //Sets zoom level (0-21)
   center: coords, //zoom in on users location
   mapTypeControl: true, //allows you to select map type eg. map or satellite
   navigationControlOptions:
   {
     style: google.maps.NavigationControlStyle.SMALL //sets map controls size eg. zoom
   },
   mapTypeId: google.maps.MapTypeId.ROADMAP //sets type of map Options:ROADMAP, SATELLITE, HYBRID, TERRIAN
 };
 map = new google.maps.Map( /*creates Map variable*/ document.getElementById("map"),    mapOptions /*Creates a new map using the passed optional parameters in the mapOptions parameter.*/);
 directionsDisplay.setMap(map);
 directionsDisplay.setPanel(document.getElementById('panel'));
 var request = {
   origin: coords,
   destination: 'BT42 1FL',
   travelMode: google.maps.DirectionsTravelMode.DRIVING
 };

 directionsService.route(request, function (response, status) {
   if (status == google.maps.DirectionsStatus.OK) {
     directionsDisplay.setDirections(response);
   }
 });
 });
 }
— 苏达孙
source
1
多数民众赞成在这样做的一个很酷的方法，但不完全是我所要求的。id只是想添加一个锚标记，仅此而已。如果在没有创建带有路线本身的google地图的情况下无法实现，那就很高兴了。无论如何，谢谢你，你得到了赞成！
— 亚历克斯
好吧，让我知道您是否找到解决方案
— Sudharsun
2

嗯，不，从iOS开发人员的角度来看，我知道有两个链接可以在iPhone上打开“地图”应用

在iOS 5及更低版本上： http://maps.apple.com?q=xxxx

在iOS 6及更高版本上： http://maps.google.com?q=xxxx

那仅在Safari上。Chrome会将您定向到Google Maps网页。

除此之外，您将需要使用一种基本超出目的的URL方案，因为没有android会知道该协议。

您可能想知道，为什么Safari打开Goog​​le Maps应用程序，然后Chrome将我定向到网页？

好吧，因为苹果浏览器是safari的内置浏览器，可以检测上面的URL。Chrome是“另一个应用程序”，并且必须符合iOS生态系统。因此，它与其他应用程序通信的唯一方法是使用URL方案。

— 塞格夫
source
3
好了，正如我所说，iOS的检测图：//协议，并通过当前位置Android为开放的直接映射，但使用一个共同的谷歌地图的网址，有什么你说是不完全正确..
— 亚历克斯
1

根据文档，该origin参数是可选的，并且默认为用户所在的位置。

... Defaults to most relevant starting location, such as user location, if available. If none, the resulting map may provide a blank form to allow a user to enter the origin....

例如： https://www.google.com/maps/dir/?api=1&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling

对我来说，这适用于桌面，IOS和Android。

— 柯尼
source
1

无论使用哪种平台，URL语法都是相同的

String url = "https://www.google.com/maps/search/?api=1&query=" + latitude + ","+ 
longitude;

在Android或iOS中，URL在Maps应用程序中启动Google Maps。如果未安装Google Maps应用程序，则UR​​L在浏览器中启动Google Maps并执行请求的操作。

在任何其他设备上，URL会在浏览器中启动Google Maps并执行请求的操作。

这是官方文档的链接 https://developers.google.com/maps/documentation/urls/guide

— Akshay更多
source
0

我发现这是全面的：

<a href="https://www.google.com/maps/place/1+Fake+Street,+City+Province/State>Get Directions</a>

对于台式机/笔记本电脑，用户必须在加载地图时单击“方向”，但是根据我的测试，所有移动设备都将毫不费力地将链接加载到Google Maps应用中。

— Noakelstein
source
1
但这不是问题：)
— Alex
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.