Mevcut konumdan başlayıp belirli bir yeri hedefleyen bir rota ile Google haritalarını açan tüm mobil cihazlar için bir bağlantı nasıl oluşturulur?

89

Bunu öğrenmenin o kadar zor olmayacağını düşündüm ama görünüşe göre, beklediğiniz gibi harika bir çapraz cihaz makalesi bulmak kolay değil.

Ya mobil cihazın tarayıcısını açan ve google haritalarında gezinen YA DA bir harita uygulaması (Apple Maps veya Google Maps) açıp doğrudan bir rota başlatan bir bağlantı oluşturmak istiyorum, yani: geçerli konumda başlamak, belirli bir noktada bitmek ( enlem / boylam).

Bir Android ve bir iPhone olmak üzere iki cihazda (tarayıcı yığınının yanında) test edebilirim.

Aşağıdaki bağlantı yalnızca Android'de çalışır:

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

Bu bağlantı iPhone'un Chrome'unda tıklandığında, bu garip bir şekilde Google Haritalar'ı mobil uygulamadaki reklamlarla masaüstü sürümünde açar ...

Bu yalnızca iOS'ta çalışıyor, Apple Haritalar'ı açarak benden bir başlangıç ​​konumu girmemi istiyor ("Mevcut Konum" u seçebilirim) ve rotayı başlat = istenen davranış. Bu bağlantıya tıklamak Android'de tamamen başarısız oluyor:

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

Maps: // protokolüne dikkat edin.

Böyle bir bağlantı oluşturmanın zarif bir çapraz cihaz yolu var mı? Tüm ana cep telefonlarında çalışan bir bağlantı mı?

Teşekkürler

GÜNCELLEME: Çözüm bulundu (tür)

İşte bulduğum şey. İşe yarasa da, hayal ettiğim gibi değil.

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://protokol elma url şeması sadece ios 6 veya daha üzerinde çalışmaya başlayacak uygulamayı haritalar olduğunu. Boşlukların kurulu olup olmadığını test etmenin ve ardından url ile ne yapılacağını seçmenin yolları var, ama bu benim niyet ettiğim şey için çok fazlaydı. Bu yüzden, yukarıdaki parametreleri kullanarak bir maps: // VEYA maps.google.com/ bağlantısı oluşturdum.

** GÜNCELLEME **

maalesef $ .browser.device jquery 1.9'dan beri çalışmıyor (kaynak - http://api.jquery.com/jquery.browser )

android  html  ios  google-maps  mobile 
— Alex
kaynak
1
Hangi sunucu tarafı dilini kullanıyorsunuz? Bu sorunu kullanıcı aracısı koklama ile çözebilirsiniz.
— Uooo
Yapabileceğimi biliyorum ama çapraz tarayıcı yapmak istiyorum. PHP ve JS kullanıyorum
— Alex
@Alex - Bunu masaüstünde çalışacak şekilde nasıl çevirirsiniz? Bu maps.google.com, Android ve Masaüstü ve maps:// iOS'ta çalışır.
— kaoscify
@Alex - a(son satır) tanımsız olduğunu söyleyen bir hata alıyorum . Bir infoWindow içinde, kullanılan cihaza bağlı olarak değişmesi gereken bir URL var.
— kaoscify
1
Yanıtlardan hiçbirinin platformu (tarayıcıyı değil) tespit etmede gerçekten harika bir iş çıkardığını fark ettim , bu yüzden platformu (ör. Masaüstü, mobil), tarayıcıyı ve hatta işletim sistemini algılayan bir jQuery eklentisi olan PgwBrowser'ı buldum . Ayrıca sıkıştırıldığında ve gzip ile sıkıştırıldığında> 2 KB'dir. Bununla, os.group'u bir switchifadede kontrol edebilir ve tarayıcıyı buna göre yönlendirebilirim.
— filoxo

Yanıtlar:

94

Uhmm, telefonlarla pek çalışmadım, bu yüzden bunun işe yarayıp yaramayacağını bilmiyorum ama sadece html / javascript bakış açısından, kullanıcının cihazına bağlı olarak farklı bir url açabilir misin?

<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]");
}
— James
kaynak
Sizin ve Alex Pretzlav cevaplarınız benim için işe en yakın cevaplar, ancak sizinki javascript kullanırken nasıl görüneceğine daha çok gidiyor, teşekkür ederim. Son çözümü sağlamak için gönderimi güncelleyeceğim
— Alex
1
Bunu yaklaşık bir yıl önce çok araştırdım ve size maps.apple.com/?q=Mexican+Restaurant kullanmanın google sayfasına yönlendirileceğini (deneyin!) Ve istisnası olan bir cihaz olduğunu söyleyebilirim. apple maps uygulaması, bunun yerine o uygulamayı açacaktır. Diğer her şey için google maps uygulamasını / sayfasını açacaktır. ödül pls.
— Worthy7
— Worthy7
@ Worthy7 görünüşe göre test etmedim, ancak bir androidde maps.apple.com/* google maps web sitesine yönlendirecek, maps.google.com/* ise yerel bir harita uygulaması seçmenize izin verecek.
— James
Kullanıcı haritası uygulamasını yeni bir tarayıcı sayfası yerine Android'de açmak için bu cevabı kullanmanızı şiddetle tavsiye ederim !
— PaulCo
24

İlginç bir şekilde, http://maps.apple.combağlantılar bir iOS cihazda doğrudan Apple Haritalar'da açılacak veya aksi takdirde Google Haritalar'a yönlendirilecek (bu daha sonra bir Android cihazda durdurulacak), böylece her iki durumda da doğru olanı yapacak dikkatli bir URL oluşturabilmeniz için " Apple Maps "URL'si şöyle:

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

Alternatif olarak, /mapsbir Android cihazda doğrudan Google Haritalar'da açmak için doğrudan bir Google Haritalar URL'sini ( URL bileşeni olmadan ) kullanabilir veya bir iOS cihazında Google Haritalar'ın Mobil Web'inde açabilirsiniz:

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

— Alex Pretzlav
kaynak
1
Bu yüzden Android telefonumu aldım, Google Chrome web tarayıcısını açtım ve URL'yi girdim http://maps.google.com/. Bu URL'yi web tarayıcısındaki bu URL'de açtı. Google Haritalar uygulamasını açmasını bekliyordum . Burada yazdıklarını yanlış mı anladım Alex Pretzlav? ;-)
— Leo
3
@Leo Android, tarayıcıya doğrudan girildiğinde bir bağlantıya tıklandığında URL'leri farklı şekilde işler. Maps.google.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA gibi bir Google Haritalar URL'sini kendinize e-postayla göndermeyi ve ardından e-posta istemcinizden ona dokunmayı deneyin .
— Alex Pretzlav
Teşekkürler @AlexPretzlav. Evet, işleri bir araya getirmek için orada yapacak işleri var. Ortaya çıkan herhangi bir standart var mı?
— Leo
1
Bunu bir URL olarak gönderiyorum , böylece android haritamda test edebilirim .apple.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA Yukarıdaki URL, androidimdeki maps.google.comandroid telefonumda bir dizi farklı yol tarifi uygulamasını açmama izin veriyor.
— raphael
15

sadece bu soruya çarptım ve burada tüm cevapları buldum, yukarıdaki kodlardan bazılarını aldım ve android ve iphone üzerinde çalışan basit js işlevini yaptım (neredeyse her android ve iPhone'u destekler).

  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>
— talsiboni
kaynak
10

Bu benim için tüm cihazlarda [iOS, Android ve Windows Mobile 8.1] çalışıyor.

Hiçbir şekilde en iyi şekilde görünmüyor ... ama daha basit olamaz :)

<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

— Deepakssn
kaynak
Çok temiz ve kolay. Birden fazla cihazda test edin. Sorunsuz çalışıyor! Çok teşekkür ederim: D
— lzoesch
Ancak yalnızca elma haritalarını açar. Bir Android telefonunuz varsa o kadar da havalı değil.
— superluminary
1
@Kristopher - Ve Google haritalar uygulamasını mı açıyor?
— süper parlak
@superluminary gerçekten garip bir şekilde yapıyor.
— Kristopher
Koordinatlar yerine bir adrese geçmek için bunu nasıl kullanırsınız?
— Vincent
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);
   }
 });
 });
 }
— Sudharsun
kaynak
1
bu, bunu yapmanın gerçekten harika bir yolu, ama istediğim gibi değil. id daha çok bir bağlantı etiketi eklemek istiyor, daha fazlası değil. Rotanın kendisi olan bir google haritası oluşturmadan mümkün değilse, bunu bilmek güzel. yine de teşekkürler, bir olumlu oy aldın!
— Alex
Tamam, bir çözüm
— bulursan
2

Şey, hayır, bir iOS geliştiricisi adayı, iPhone'daki Haritalar uygulamasını açacağını bildiğim iki bağlantı var.

İOS 5 ve önceki sürümlerde: http://maps.apple.com?q=xxxx

İOS 6 ve sonraki sürümlerde: http://maps.google.com?q=xxxx

Ve bu sadece Safari'de. Chrome sizi Google Haritalar web sayfasına yönlendirecek.

Bunun dışında, temelde amacı aşan bir URL şeması kullanmanız gerekecek çünkü hiçbir android bu protokolü bilmeyecek.

Bilmek isteyebilirsiniz, Safari neden Haritalar uygulamasını açıyor ve Chrome beni bir web sayfasına yönlendiriyor?

Çünkü safari, apple tarafından yapılan bir tarayıcıdır ve yukarıdaki URL'yi tespit edebilir. Chrome "yalnızca başka bir uygulama" dır ve iOS Ekosistemiyle uyumlu olmalıdır. Bunun için diğer uygulamalarla iletişim kurmasının tek yolu URL şemaları kullanmaktır.

— Segev
kaynak
3
Şey, dediğim gibi, iOS maps: // protokolünü algılıyor ve Android, Haritalar'ı doğrudan Mevcut Konum üzerinden ancak ortak bir Google Haritalar URL'si kullanarak açıyor, bu yüzden söyledikleriniz pek doğru değil ..
— Alex
1

Dayanarak belgelereorigin parametresi isteğe bağlıdır ve kullanıcının bulunduğu yeri varsayılan olarak.

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

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

Benim için bu Masaüstü, IOS ve Android'de çalışıyor.

— Koni
kaynak
1

URL sözdizimi, kullanılan platformdan bağımsız olarak aynıdır

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

Android veya iOS'ta URL, Haritalar uygulamasında Google Haritalar'ı başlatır, Google Haritalar uygulaması yüklü değilse, URL, Google Haritalar'ı bir tarayıcıda başlatır ve istenen işlemi gerçekleştirir.

Başka herhangi bir cihazda, URL, Google Haritalar'ı bir tarayıcıda başlatır ve istenen işlemi gerçekleştirir.

resmi belgeler için bağlantı burada https://developers.google.com/maps/documentation/urls/guide

— Akshay Daha Fazla
kaynak
0

Bunun her yerde işe yaradığını buldum:

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

Masaüstü bilgisayarlar / dizüstü bilgisayarlar için, kullanıcının bu harita yüklendiğinde Yol Tarifi'ni tıklaması gerekir, ancak benim testlerime göre tüm mobil cihazlar bu bağlantıyı Google Haritalar uygulamasına zorluk çekmeden yükleyecektir.

— Noakelstein
kaynak
1
ama bu soru :) değildi
— Alex
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.