96

我宁愿认为这并不难找到，但显然要找到一篇很棒的跨设备文章并不容易，就像你所期望的那样。

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

我可以在两台设备（除了 browserstack）上进行测试，Android 和 iPhone。

以下链接仅适用于 Android：

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

在 iPhone 的 Chrome 中单击此链接，这会奇怪地在桌面版中打开谷歌地图，并在移动应用程序上显示广告......

这仅适用于 iOS，打开 Apple 地图要求我输入起始位置（我可以选择“当前位置”）并开始路线 = 所需行为。在 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://协议是苹果地图应用程序的 url 方案，它将仅在 ios 6 或更高版本上开始工作。有一些方法可以测试是否安装了 gmaps，然后选择如何处理 url，但这对于我的意图来说有点太多了。所以我最终使用上述参数创建了一个 maps:// 或 maps.google.com/ 链接。

** 更新 **

可悲的是，$.browser.device自 jquery 1.9 起就无法使用（来源 - http://api.jquery.com/jquery.browser）

4

10 回答 10

103

我用手机工作的不多，所以我不知道这是否可行。但仅从 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]");
}
于 2013-09-19T16:06:06.067 回答
29

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

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

或者，您可以直接使用 Google Maps url（不带/mapsURL 组件）在 Android 设备上的 Google Maps 中直接打开，或在 iOS 设备上的 Google Maps 的 Mobile Web 中打开：

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

于 2013-09-18T22:09:19.993 回答
15

刚刚碰到这个问题，在这里找到了所有答案，我采用了上面的一些代码并制作了适用于 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>
于 2014-01-20T07:56:54.717 回答
13

这适用于所有设备 [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

于 2014-07-11T11:27:45.977 回答
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);
   }
 });
 });
 }
于 2013-09-20T04:02:23.380 回答
4

简单网址：

https://www.google.com/maps/dir/?api=1&destination=lat,lng

此 url 专用于路由。

参考：https ://developers.google.com/maps/documentation/urls/guide#directions-action

于 2019-03-14T04:25:27.263 回答
2

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

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

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

那只是在 Safari 上。Chrome 会将您定向到 Google 地图网页。

除此之外，您需要使用一个基本上可以达到目的的 URL 方案，因为没有 android 会知道该协议。

您可能想知道，为什么 Safari 会打开地图应用，而 Chrome 会将我引导至网页？

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

于 2013-09-15T19:39:31.750 回答
1

我发现这适用于所有方面：

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

对于台式机/笔记本电脑，用户必须在加载该地图时单击“方向”，但根据我的测试，所有移动设备都会毫无困难地在 Google 地图应用程序中加载该链接。

于 2016-06-14T02:54:58.260 回答
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。

于 2017-05-18T06:33:30.157 回答
1

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

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

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

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

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

于 2018-10-16T09:16:47.247 回答