나는 이것이 찾기가 그렇게 어렵지 않을 것이라고 생각했지만 예상했던 것처럼 멋진 크로스 디바이스 기사를 찾는 것은 쉽지 않습니다.
모바일 장치의 브라우저를 열고 Google지도를 검색하거나지도 앱 (Apple지도 또는 Google지도)을 열고 경로를 직접 시작하는 링크를 만들고 싶습니다. 즉, 현재 위치에서 시작하여 지정된 지점에서 끝납니다 ( 위도 / 경도).
두 기기 (브라우저 스택 옆), Android와 iPhone에서 테스트 할 수 있습니다.
다음 링크는 Android에서만 작동합니다.
<a href="http://maps.google.com/maps?daddr=lat,long&ll=">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>
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 )
답변
음, 전화를 많이 사용하지 않았으므로 이것이 작동하는지 모르겠지만 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
링크는 iOS 기기의 Apple지도에서 직접 열리거나 그렇지 않으면 Google지도로 리디렉션됩니다 (그런 다음 Android 기기에서 차단됨). 두 경우 모두에서 올바른 작업을 수행하는 신중한 URL을 만들 수 있습니다. Apple Maps “URL :
http://maps.apple.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA
또는 Google지도 URL을 직접 ( /maps
URL 구성 요소 없이 ) 사용하여 Android 기기의 Google지도에서 직접 열거 나 iOS 기기의 Google지도 모바일 웹에서 열 수 있습니다.
http://maps.google.com/?daddr=1+Infinite+Loop,+Cupertino+CA
답변
방금이 질문에 부딪 혔고 여기에서 위의 코드 중 일부를 가져 와서 Android 및 iPhone에서 작동하는 간단한 js 기능을 만들었습니다 (거의 모든 Android 및 iPhone 지원).
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>
답변
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
그리고 그것은 사파리에만 있습니다. Chrome이 Google지도 웹 페이지로 이동합니다.
그 외에는 안드로이드가 그 프로토콜을 알지 못하기 때문에 기본적으로 목적을 능가하는 URL 체계를 사용해야합니다.
Safari가지도 앱을 열고 Chrome이 웹 페이지로 연결되는 이유는 무엇입니까?
음, 사파리는 애플이 만든 브라우저의 빌드이고 위의 URL을 감지 할 수 있기 때문입니다. Chrome은 “그저 또 다른 앱”이며 iOS 생태계를 준수해야합니다. 따라서 다른 앱과 통신하는 유일한 방법은 URL 스키마를 사용하는 것입니다.