我认为这不是很难找到,但很明显,它并不容易找到一篇令人惊叹的跨设备文章,就像你预期的那样。
我想创建一个链接,它可以打开移动设备的浏览器并浏览到google地图,或者打开地图应用程序(Apple maps或Google Maps)并直接开始一条路线,即:从当前位置开始,在给定的点(经度/经度)结束。
我可以在两个设备(除了浏览器栈之外)上测试,一个Android和一个iPhone。
以下链接仅在Android上有效:
<a href="http://maps.google.com/maps?daddr=lat,long&ll=">Take me there!</a>
在iPhone的Chrome中点击这个链接,就会奇怪地在桌面版本中打开Google Maps,在移动应用程序上显示广告……
这个只在iOS上有效,打开苹果地图,要求我输入一个起始位置(我可以选择“当前位置”),然后开始路由=所需的行为。在Android上单击此链接完全失败:
<a href="maps://maps.google.com/maps?daddr=lat,long&ll=">Take me there!</a>
注意map://协议。
有没有一种优雅的跨设备的方式来创建这样的链接?一个可以在所有主要手机上工作的链接?
谢谢
更新:找到解决方案(有点)
这是我想出来的。它并不完全像我想象的那样,尽管它是工作的。
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方案,它只能在iOS6或更高版本上运行。有一些方法可以测试是否安装了gmap,然后选择如何处理url,但这对我的意图来说有点太多了。因此,我使用上面的参数创建了一个map:// OR maps.google.com/ link。
**更新**
遗憾的是,从jQuery1.9(来源- http://api.jquery.com/jquery.browser )开始,$.browser.device就不能工作了
发布于 2013-09-20 00:06:06
我没怎么用过手机,所以我不知道这个能不能用。但仅仅从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]");
}
发布于 2013-09-19 06:09:20
有趣的是,http://maps.apple.com
链接将直接在iOS设备上的苹果地图中打开,或者重定向到谷歌地图(然后在安卓设备上被拦截),因此您可以精心制作一个在这两种情况下都能正确使用的“苹果地图”URL,如下所示:
http://maps.apple.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA
或者,您可以直接使用谷歌地图url (没有/maps
URL组件)在安卓设备上的谷歌地图中直接打开,或在iOS设备上的谷歌地图移动网络中打开:
http://maps.google.com/?daddr=1+Infinite+Loop,+Cupertino+CA
发布于 2014-01-20 15:56:55
在这个问题中,我找到了所有的答案,我用上面的一些代码做了一个简单的js函数,它可以在android和iphone上工作(它支持几乎所有的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>
https://stackoverflow.com/questions/18739436
复制相似问题