Я скорее подумал, что это будет не так сложно найти, но, похоже, нелегко найти потрясающую статью о кросс-девайсах, как и следовало ожидать.
Я хочу создать ссылку, которая открывает либо браузер мобильного устройства и просматривает карты Google, либо открывает приложение карт (Apple Maps или Google Maps) и напрямую начинает маршрут, то есть: начать в текущем местоположении, закончить в заданной точке ( широта / долгота).
Я могу тестировать на двух устройствах (помимо стека браузера), Android и iPhone.
Следующая ссылка работает только на Android:
<a href="http://maps.google.com/maps?daddr=lat,long&ll=">Take me there!</a>
При нажатии на эту ссылку в Chrome на iPhone это странным образом открывает Google Maps в настольной версии с рекламой в мобильном приложении ...
Этот работает только на iOS, открывая Apple Maps, предлагая мне ввести начальное местоположение (я могу выбрать «Текущее местоположение») и начать маршрут = желаемое поведение. Нажатие на эту ссылку полностью не работает на Android:
<a href="maps://maps.google.com/maps?daddr=lat,long&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: // OR maps.google.com/, используя указанные выше параметры.
** ОБНОВИТЬ **
к сожалению, $ .browser.device не работает с jquery 1.9 (источник - http://api.jquery.com/jquery.browser )
maps.google.comработает на Android и Desktop, а такжеmaps://на iOS.a(последняя строка) не определена. У меня есть URL-адрес внутри информационного окна, который мне нужно изменить в зависимости от используемого устройства.switchоператоре и соответствующим образом направить браузер.Ответы:
Умм, я мало работал с телефонами, поэтому не знаю, сработает ли это, но только с точки зрения 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 напрямую (без
/mapsкомпонента URL), чтобы открыть его непосредственно в Google Maps на устройстве Android или открыть в мобильном Интернете Google Maps на устройстве iOS:http://maps.google.com/?daddr=1+Infinite+Loop,+Cupertino+CAисточник
http://maps.google.com/. Он просто открыл этот URL-адрес в этом URL-адресе в веб-браузере. Я ожидал, что это откроет приложение Google Maps . Я неправильно понял то, что вы здесь написали, Алекс Претцлав? ;-)maps.google.comпозволяет мне открывать несколько приложений с разными направлениями на моем телефоне Android.просто наткнулся на этот вопрос и нашел здесь все ответы. Я взял некоторые из приведенных выше кодов и сделал простую функцию 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, я знаю две ссылки, которые откроют приложение Maps на 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 направляет меня на веб-страницу?
Ну, потому что Safari - это сборка в браузере, созданная 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».
источник