현재 위치에서 시작하여 지정된 장소를 향하는 경로로 Google지도를 여는 모든 모바일 장치에 대한 링크를 만드는 방법은 무엇입니까?
나는 이것이 찾기가 그렇게 어렵지 않을 것이라고 생각했지만 예상했던 것처럼 멋진 크로스 디바이스 기사를 찾는 것은 쉽지 않습니다.
모바일 장치의 브라우저를 열고 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://maps.google.com/maps?daddr=lat,long&ll=");
else
window.open("http://maps.google.com/maps?daddr=lat,long&ll=");
}
흥미롭게도 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을 직접 ( /mapsURL 구성 요소 없이 ) 사용하여 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);
}
});
});
}
아니요, iOS 개발자의 경우 iPhone에서지도 앱을 여는 링크가 두 개 있습니다.
iOS 5 이하 : http://maps.apple.com?q=xxxx
iOS 6 이상 : http://maps.google.com?q=xxxx
그리고 그것은 Safari에만 있습니다. Chrome이 Google지도 웹 페이지로 이동합니다.
Other than that you'll need to use a URL scheme that basically beats the purpose because no android will know that protocol.
You might want to know, Why Safari opens the Maps app and Chrome directs me to a webpage?
Well, because safari is the build in browser made by apple and can detect the URL above. Chrome is "just another app" and must comply to the iOS Ecosystem. Therefor the only way for it to communicate with other apps is by using URL schemes.
Based on the documentation the origin parameter is optional and it defaults to the user's location.
... 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
For me this works on Desktop, IOS and Android.
The URL syntax is the same regardless of the platform in use
String url = "https://www.google.com/maps/search/?api=1&query=" + latitude + ","+
longitude;
In Android or iOS the URL launches Google Maps in the Maps app, If the Google Maps app is not installed, the URL launches Google Maps in a browser and performs the requested action.
On any other device, the URL launches Google Maps in a browser and performs the requested action.
here's the link for official documentation https://developers.google.com/maps/documentation/urls/guide
Simple URL :
https://www.google.com/maps/dir/?api=1&destination=lat,lng
This url is specific for routing.
Reference : https://developers.google.com/maps/documentation/urls/guide#directions-action
I found that this works across the board:
<a href="https://www.google.com/maps/place/1+Fake+Street,+City+Province/State>Get Directions</a>
For desktops/laptops the user has to click Directions when that map loads, but from my testing all mobile devices will load that link in the Google Maps app without difficulty.
'Programing' 카테고리의 다른 글
| Windows에서 Ruby / Rails 실행시 제한 사항 (0) | 2020.10.08 |
|---|---|
| If-else if-else over switch 문을 사용하거나 그 반대의 경우 (0) | 2020.10.08 |
| TypeScript는 유형 별칭을 허용합니까? (0) | 2020.10.08 |
| Javascript의 다형성이란 무엇입니까? (0) | 2020.10.08 |
| ASP.NET MVC에서 페이지 매김을 어떻게 수행합니까? (0) | 2020.10.08 |