Saya agak berpikir ini tidak akan terlalu sulit untuk ditemukan tetapi tampaknya tidak mudah untuk menemukan artikel lintas perangkat yang luar biasa, seperti yang Anda harapkan.
Saya ingin membuat tautan yang membuka browser perangkat seluler dan menjelajahi google maps ATAU membuka aplikasi peta (Apple Maps atau Google Maps) dan langsung memulai rute, yaitu: mulai di lokasi saat ini, berakhir di titik tertentu ( lintang / bujur).
Saya dapat menguji pada dua perangkat (di samping browserstack), Android dan iPhone.
Tautan berikut hanya berfungsi di Android:
<a href="http://maps.google.com/maps?daddr=lat,long&ll=">Take me there!</a>
Mengklik tautan ini di Chrome iPhone, ini secara aneh membuka Google Maps dalam versi desktop dengan iklan di aplikasi seluler ...
Yang ini hanya berfungsi di iOS, membuka Apple Maps meminta saya untuk memasukkan lokasi awal (saya dapat memilih "Lokasi Saat Ini") dan memulai rute = perilaku yang diinginkan. Mengklik tautan ini sepenuhnya gagal di Android:
<a href="maps://maps.google.com/maps?daddr=lat,long&ll=">Take me there!</a>
Perhatikan peta: // protocol.
Apakah ada cara lintas perangkat yang elegan untuk membuat tautan seperti itu? Satu tautan yang berfungsi di semua ponsel utama?
Terima kasih
UPDATE: Solusi ditemukan (agak)
Inilah yang saya dapatkan. Ini tidak seperti yang saya bayangkan, meskipun berhasil.
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)
yang maps://protokol adalah skema url untuk apel peta app, yang hanya akan mulai bekerja pada ios 6 atau lebih tinggi. Ada beberapa cara untuk menguji apakah gmaps diinstal dan kemudian memilih apa yang harus dilakukan dengan url, tetapi itu terlalu berlebihan untuk apa yang saya inginkan. Jadi saya akhirnya membuat peta: // ATAU tautan maps.google.com/, menggunakan parameter di atas.
** PEMBARUAN **
Sayangnya, $ .browser.device tidak berfungsi sejak jquery 1.9 (sumber - http://api.jquery.com/jquery.browser )
maps.google.comberfungsi di Android dan Desktop, danmaps://di iOS.a(baris terakhir) tidak ditentukan. Saya memiliki URL di dalam infoWindow yang saya perlukan untuk mengubahnya tergantung pada perangkat yang digunakan.switchpernyataan dan merutekan browser yang sesuai.Jawaban:
Uhmm, saya belum banyak bekerja dengan ponsel jadi saya tidak tahu apakah ini akan berhasil tetapi hanya dari sudut pandang html / javascript, bisakah Anda membuka url yang berbeda tergantung pada perangkat pengguna?
<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]"); }sumber
Menariknya,
http://maps.apple.comtautan akan terbuka langsung di Apple Maps pada perangkat iOS, atau dialihkan ke Google Maps sebaliknya (yang kemudian disadap pada perangkat Android), sehingga Anda dapat membuat URL yang cermat yang akan melakukan hal yang benar dalam kedua kasus menggunakan " URL Apple Maps seperti:http://maps.apple.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CAAtau, Anda dapat menggunakan url Google Maps secara langsung (tanpa
/mapskomponen URL) untuk langsung membuka Google Maps pada perangkat Android, atau membuka di Web Seluler Google Maps pada perangkat iOS:http://maps.google.com/?daddr=1+Infinite+Loop,+Cupertino+CAsumber
http://maps.google.com/. Itu baru saja membuka URL ini di URL itu di browser web. Saya mengharapkannya untuk membuka aplikasi Google Maps . Apakah saya salah paham dengan apa yang Anda tulis di sini, Alex Pretzlav? ;-)maps.google.commemungkinkan saya membuka sejumlah aplikasi arah berbeda di ponsel android saya.baru saja menemukan pertanyaan ini dan menemukan di sini semua jawaban saya mengambil beberapa kode di atas dan membuat fungsi js sederhana yang berfungsi di android dan iphone (mendukung hampir semua android dan 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>sumber
Ini berfungsi untuk saya di semua perangkat [iOS, Android, dan Window Mobile 8.1].
Tidak terlihat seperti cara terbaik dengan cara apa pun ... tetapi tidak bisa lebih sederhana :)
<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
sumber
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); } }); }); }sumber
URL sederhana:
https://www.google.com/maps/dir/?api=1&destination=lat,lngUrl ini khusus untuk perutean.
Referensi: https://developers.google.com/maps/documentation/urls/guide#directions-action
sumber
Nah tidak, dari calon developer iOS, ada dua link yang saya tahu yang akan membuka aplikasi Maps di iPhone
Di iOS 5 dan lebih rendah:
http://maps.apple.com?q=xxxxDi iOS 6 dan lebih tinggi:
http://maps.google.com?q=xxxxDan itu hanya di Safari. Chrome akan mengarahkan Anda ke halaman web Google Maps.
Selain itu, Anda harus menggunakan skema URL yang pada dasarnya mengalahkan tujuan tersebut karena tidak ada android yang akan mengetahui protokol itu.
Anda mungkin ingin tahu, Mengapa Safari membuka aplikasi Maps dan Chrome mengarahkan saya ke halaman web?
Nah, karena safari adalah build in browser buatan apple dan bisa mendeteksi URL diatas. Chrome adalah "hanya aplikasi lain" dan harus mematuhi Ekosistem iOS. Oleh karena itu, satu-satunya cara untuk berkomunikasi dengan aplikasi lain adalah dengan menggunakan skema URL.
sumber
Berdasarkan dokumentasi ,
originparameternya opsional dan defaultnya adalah lokasi pengguna.... 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=bicyclingBagi saya ini berfungsi di Desktop, iOS dan Android.
sumber
Sintaks URL sama terlepas dari platform yang digunakan
String url = "https://www.google.com/maps/search/?api=1&query=" + latitude + ","+ longitude;Di Android atau iOS, URL meluncurkan Google Maps di aplikasi Maps, Jika aplikasi Google Maps tidak diinstal, URL meluncurkan Google Maps di browser dan melakukan tindakan yang diminta.
Di perangkat lain mana pun, URL meluncurkan Google Maps di browser dan melakukan tindakan yang diminta.
inilah tautan untuk dokumentasi resmi https://developers.google.com/maps/documentation/urls/guide
sumber
Saya menemukan bahwa ini berfungsi di seluruh papan:
<a href="https://www.google.com/maps/place/1+Fake+Street,+City+Province/State>Get Directions</a>Untuk desktop / laptop pengguna harus mengklik Petunjuk Arah saat peta itu dimuat, tetapi dari pengujian saya semua perangkat seluler akan memuat tautan itu di aplikasi Google Maps tanpa kesulitan.
sumber