จะสร้างลิงค์สำหรับอุปกรณ์มือถือทั้งหมดที่เปิดแผนที่ Google ด้วยเส้นทางเริ่มต้นที่ตำแหน่งปัจจุบันโดยกำหนดสถานที่ที่กำหนด

ฉันค่อนข้างคิดว่านี่คงไม่ใช่เรื่องยากที่จะหา แต่ดูเหมือนว่ามันไม่ใช่เรื่องง่ายที่จะค้นหาบทความข้ามอุปกรณ์ที่ยอดเยี่ยมอย่างที่คุณคาดหวัง

ฉันต้องการสร้างลิงก์ที่เปิดเบราว์เซอร์ของอุปกรณ์มือถือและท่องไปยังแผนที่ Google หรือเปิดแอปแผนที่ (Apple Maps หรือ Google Maps) และเริ่มต้นเส้นทางโดยตรงเช่นเริ่มต้นที่ตำแหน่งปัจจุบันสิ้นสุด ณ จุดที่กำหนด ( lat / long)

ฉันสามารถทดสอบบนอุปกรณ์สองเครื่อง (ข้าง browserstack) คือ Android และ iPhone

ลิงค์ต่อไปนี้ใช้ได้เฉพาะบน Android:

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

เมื่อคลิกลิงก์นี้ใน Chrome ของ iPhone สิ่งนี้จะเปิด Google Maps ในเวอร์ชันเดสก์ท็อปอย่างแปลกประหลาดพร้อมโฆษณาบนแอปมือถือ ...

อันนี้ใช้ได้เฉพาะบน iOS เปิด Apple Maps ขอให้ฉันป้อนตำแหน่งเริ่มต้น (ฉันสามารถเลือก "ตำแหน่งปัจจุบัน") และเริ่มเส้นทาง = พฤติกรรมที่ต้องการ การคลิกลิงก์นี้ล้มเหลวโดยสิ้นเชิงบน Android:

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

สังเกตแผนที่: // protocol

มีวิธีการข้ามอุปกรณ์ที่สวยงามในการสร้างลิงก์ดังกล่าวหรือไม่? ลิงค์เดียวที่ใช้ได้กับโทรศัพท์มือถือหลักทั้งหมด?

ขอบคุณ

UPDATE: พบโซลูชันแล้ว (นะ)

นี่คือสิ่งที่ฉันคิดขึ้นมา มันไม่ใช่อย่างที่ฉันคิดแม้ว่ามันจะใช้งานได้

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 สำหรับแอปเปิ้ลแอป Maps ซึ่งจะเริ่มต้นการทำงานบน iOS 6 หรือสูงกว่า มีหลายวิธีในการทดสอบว่ามีการติดตั้ง gmaps หรือไม่จากนั้นเลือกว่าจะทำอย่างไรกับ url แต่มันมากเกินไปสำหรับสิ่งที่ฉันตั้งใจไว้ ดังนั้นฉันจึงสร้างแผนที่: // หรือลิงก์ maps.google.com/ โดยใช้พารามิเตอร์ด้านบน

** อัพเดท **

น่าเศร้าที่$ .browser.deviceไม่ทำงานเนื่องจาก jquery 1.9 (ที่มา - http://api.jquery.com/jquery.browser )

อืมฉันไม่ค่อยได้ทำงานกับโทรศัพท์มากนักดังนั้นฉันจึงไม่รู้ว่ามันจะใช้งานได้หรือไม่ แต่จากมุมมอง 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]");
}

ที่น่าสนใจคือ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ส่วนประกอบ URL) เพื่อเปิดโดยตรงใน Google แผนที่บนอุปกรณ์ Android หรือเปิดในเว็บบนมือถือของ Google แผนที่บนอุปกรณ์ iOS:

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

เพิ่งเจอคำถามนี้และพบคำตอบทั้งหมดที่นี่ฉันใช้รหัสข้างต้นและสร้างฟังก์ชั่น js ง่ายๆที่ใช้งานได้บน Android และ iphone (รองรับ Android และ iphones เกือบทุกรุ่น)

  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 + '&ll=';
    }
    else {
      window.open('http://maps.google.com?daddr=' + lat + ',' + lng + '&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);
   }
 });
 });
 }

URL แบบง่าย:

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

URL นี้เฉพาะสำหรับการกำหนดเส้นทาง

ข้อมูลอ้างอิง: https://developers.google.com/maps/documentation/urls/guide#directions-action

ไม่เลยจากผู้ที่คาดว่าจะเป็นนักพัฒนา 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 จึงเปิดแอปแผนที่และ Chrome นำฉันไปที่หน้าเว็บ

เนื่องจากซาฟารีเป็นเบราว์เซอร์ที่สร้างโดย apple และสามารถตรวจจับ URL ด้านบนได้ Chrome เป็น "เพียงแอปอื่น" และต้องเป็นไปตามระบบนิเวศของ iOS ดังนั้นวิธีเดียวที่จะสื่อสารกับแอปอื่น ๆ ได้คือการใช้โครงร่าง URL

ขึ้นอยู่กับเอกสาร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

ไวยากรณ์ของ URL จะเหมือนกันไม่ว่าจะใช้แพลตฟอร์มใด

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

ใน Android หรือ iOS URL จะเปิด Google Maps ในแอป Maps หากไม่ได้ติดตั้งแอป Google Maps URL จะเปิด Google Maps ในเบราว์เซอร์และดำเนินการตามที่ร้องขอ

บนอุปกรณ์อื่น ๆ URL จะเปิด Google Maps ในเบราว์เซอร์และดำเนินการตามที่ร้องขอ

นี่คือลิงค์สำหรับเอกสารอย่างเป็นทางการ https://developers.google.com/maps/documentation/urls/guide

ฉันพบว่าสิ่งนี้ใช้ได้ทั่วทั้งกระดาน:

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

สำหรับเดสก์ท็อป / แล็ปท็อปผู้ใช้จะต้องคลิกเส้นทางเมื่อแผนที่นั้นโหลด แต่จากการทดสอบอุปกรณ์เคลื่อนที่ทั้งหมดของฉันจะโหลดลิงก์นั้นในแอป Google Maps ได้อย่างไม่ยากเย็น