Как создать ссылку для всех мобильных устройств, которая открывает google maps с маршрутом, начинающимся в текущем местоположении, предназначенном для данного места?


Я скорее думал, что это будет не так сложно выяснить, но, по-видимому, нелегко найти потрясающую статью о кросс-устройстве, как и следовало ожидать.

Я хочу создать ссылку, которая открывает браузер мобильного устройства и серфинг на google maps или открывает приложение maps (Apple Maps или Google Maps) и непосредственно запускает маршрут, т. е.: начало в текущем местоположении, конец в заданной точке (lat/long).

Я могу протестировать на двух устройствах (кроме browserstack), Android и айфон.

следующая ссылка работает только на Android:

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

нажав на эту ссылку в Chrome iPhone, это странно открывает Google Maps в настольной версии с рекламой на мобильном приложении...

этот работает только на iOS, открывая карты Apple, прося меня ввести начальное местоположение (я могу выбрать "текущее местоположение") и начать маршрут = желаемое поведение. Нажатие на эту ссылку полностью терпит неудачу на Android:

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

обратите внимание на карты:// протокол.

есть ли элегантный кросс-устройство способ создания такой ссылки? одна ссылка, которая работает на всех основных мобильных телефонах?

спасибо

обновление: решение найдено (своего рода)

вот что я придумал. Это не совсем то, что я себе представлял, хотя это работает.

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)

the maps:// протокол-это схема url для приложения apple maps, которое начнет работать только на ios 6 или выше. Есть способы проверить, установлен ли gmaps, а затем выбрать, что делать с url-адресом, но это было слишком много для того, что я намеревался. Так что я просто закончил создание карт: / / или maps.google.com / ссылка, используя указанные выше параметры.

** обновление **

к сожалению, $.браузер.устройство не работает с jquery 1.9 (источник - http://api.jquery.com/jquery.browser )

8 74

8 ответов:

Uhmm, я не много работал с телефонами, поэтому я не знаю, будет ли это работать, но только с точки зрения 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://maps.google.com/maps?daddr=lat,long&amp;ll=");
    else
         window.open("http://maps.google.com/maps?daddr=lat,long&amp;ll=");
}

интересно, что http://maps.apple.com ссылки будут открываться непосредственно в Apple Maps на устройстве iOS или перенаправляться на Google Maps в противном случае (который затем перехватывается на устройстве Android), поэтому вы можете создать осторожный URL-адрес, который будет делать правильные вещи в обоих случаях, используя URL-адрес "Apple Maps", например:

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

кроме того, вы можете использовать url-адрес Google Maps напрямую (без /maps URL компонент), чтобы открыть непосредственно в Google Maps на Android устройстве, или открыть в Google Maps' Мобильная сеть на устройстве iOS:

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

просто наткнулся на этот вопрос и нашел здесь все ответы Я взял некоторые из приведенных выше кодов и сделал простую функцию js, которая работает android и iphone (он поддерживает почти все 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: <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://';

      }
      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>

это работает для меня на всех устройствах [ 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

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);
   }
 });
 });
 }

Ну нет, от перспективного разработчика iOS, есть две ссылки, которые я знаю, что откроет приложение Maps на iPhone

на iOS 5 и ниже: http://maps.apple.com?q=xxxx

на iOS 6 и выше: http://maps.google.com?q=xxxx

и это только на сафари. Chrome направит вас на веб-страницу Google Maps.

кроме этого вам нужно будет использовать схему URL, которая в основном бьет цель, потому что ни один android не будет знать этот протокол.

вы можете знать, почему Safari открывает приложение Maps, и Chrome направляет меня на веб-страницу?

Ну, потому что safari-это встроенный браузер, созданный apple, и может обнаружить URL-адрес выше. Chrome-это "просто еще одно приложение" и должен соответствовать экосистеме iOS. Поэтому единственный способ для него общаться с другими приложениями-это использовать схемы URL.

на основе документация the 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....

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

для меня это работает на рабочем столе, IOS и Android.

Я нашел, что это работает по всем направлениям:

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

для настольных компьютеров / ноутбуков пользователь должен нажать направления, когда эта карта загружается, но из моего тестирования все мобильные устройства без труда загрузят эту ссылку в приложение Google Maps.