Как создать ссылку для всех мобильных устройств, которые открывают карты Google с маршрутом, начинающимся с текущего местоположения, определяющим данное место?
Я скорее подумал, что это будет не так сложно найти, но, похоже, нелегко найти потрясающую статью с перекрестными устройствами, как и следовало ожидать.
Я хочу создать ссылку, которая открывает либо браузер мобильных устройств, либо серфинг на карты Google, либо открывать приложение карт (Карты Apple или Карты Google) и непосредственно начинать маршрут, то есть: начать с текущего местоположения, (lat/long).
Я могу протестировать на двух устройствах (рядом с браузером), Android и iPhone.
Следующая ссылка работает только на Android:
<a href="#" onclick="location.href='http://maps.google.com/maps?daddr=lat,long&ll='; return false;">Take me there!</a>
Нажав эту ссылку в iPhone Chrome, это странно открывает Карты Google в настольной версии с объявлениями в мобильном приложении...
Это работает только на iOS, открывая Apple Maps, предлагая мне ввести начальное местоположение (я могу выбрать "Текущее местоположение" ) и начать маршрут = желаемое поведение. Щелчок по этой ссылке полностью не удался на Android:
<a href="maps://maps.google.com/maps?daddr=lat,long&ll=">Take me there!</a>
Обратите внимание на карты://protocol.
Есть ли элегантный способ перекрестного устройства для создания такой ссылки? Одна ссылка, которая работает на всех основных мобильных телефонах
Спасибо
ОБНОВЛЕНИЕ: найденное решение (kinda)
Вот что я придумал. Это не совсем то, что я себе представлял, хотя он работает.
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 для приложения apple maps, которая начнет работать только на ios 6 или выше. Есть способы проверить, установлены ли gmaps, а затем выбрали, что делать с URL-адресом, но это было слишком много для того, что я намеревался. Поэтому я только что создал карту://OR maps.google.com/, используя приведенные выше параметры.
** ОБНОВЛЕНИЕ **
К сожалению, $.browser.device не работает, поскольку jquery 1.9
(источник - http://api.jquery.com/jquery.browser)
Ответы
Ответ 1
Умм, я не очень много работал с телефонами, поэтому я не знаю, будет ли это работать, но только с точки зрения html/javascript вы могли бы просто открыть другой URL-адрес в зависимости от того, что такое пользовательское устройство?
<a style="cursor: pointer;" onclick="myNavFunc()">Take me there!</a>
function myNavFunc(){
// If it 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&ll=");
else
window.open("http://maps.google.com/maps?daddr=lat,long&ll=");
}
Ответ 2
Интересно, что ссылки 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 на устройстве Android или открываться в Google Mobile Mobile на устройстве iOS:
http://maps.google.com/?daddr=1+Infinite+Loop,+Cupertino+CA
Ответ 3
просто наткнулся на этот вопрос и нашел здесь все ответы
Я взял некоторые из приведенных выше кодов и сделал простую функцию JS, которая работает на
Android и iPhone (он поддерживает практически все Android и iPhone).
function navigate(lat, lng) {
// If it 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>
Ответ 4
Это работает для меня на всех устройствах [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
Ответ 5
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);
}
});
});
}
Ответ 6
Ну нет, от перспективного разработчика iOS, есть две ссылки, которые я знаю об этом, откроет приложение Maps на iPhone
В iOS 5 и ниже: http://maps.apple.com?q=xxxx
В iOS 6 и выше: http://maps.google.com?q=xxxx
И это только на Сафари. Chrome направит вас на веб-страницу Карт Google.
Кроме того, вам понадобится использовать схему URL, которая в основном превосходит цель, потому что ни один из них не будет знать этот протокол.
Возможно, вам захочется узнать, почему Safari открывает приложение "Карты", а Chrome направляет меня на веб-страницу?
Хорошо, потому что сафари - это сборка в браузере, сделанная яблоком, и может определить URL-адрес выше. Chrome является "просто еще одним приложением" и должен соответствовать экосистеме iOS. Поэтому единственный способ общения с другими приложениями - использование схем URL.
Ответ 7
На основе documentation параметр 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
Для меня это работает на Desktop, IOS и Android.
Ответ 8
Синтаксис URL-адреса один и тот же, независимо от используемой платформы.
String url = "https://www.google.com/maps/search/?api=1&query=" + latitude + ","+
longitude;
В Android или iOS URL-адрес запускает Карты Google в приложении "Карты". Если приложение "Карты Google" не установлено, URL-адрес запускает Карты Google в браузере и выполняет запрошенное действие.
На любом другом устройстве URL запускает Google Maps в браузере и выполняет запрошенное действие.
здесь ссылка на официальную документациюhttps://developers.google.com/maps/documentation/urls/guide
Ответ 9
Простой URL:
https://www.google.com/maps/dir/?api=1&destination=lat,lng
Этот URL предназначен для маршрутизации.
Ссылка: https://developers.google.com/maps/documentation/urls/guide#directions-action
Ответ 10
Я обнаружил, что это работает по всем направлениям:
<a href="#" onclick="location.href='https://www.google.com/maps/place/1+Fake+Street,+City+Province/State>Get Directions</a>
Для настольных компьютеров/ноутбуков пользователь должен нажать '; return false;"Направления", когда эта карта загружается, но из моего тестирования все мобильные устройства будут загружать эту ссылку в приложении "Карты Google" без труда.