web 端 调取导航总结

最新推荐文章于 2023-08-09 15:27:59 发布
最新推荐文章于 2023-08-09 15:27:59 发布
阅读量829 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u011397539/article/details/83751836
版权
本文介绍了一种使用JavaScript在不同设备上（Android和iOS）调用百度地图、高德地图和腾讯地图等地图应用程序进行导航的方法。通过检测用户的设备类型，选择相应的地图API，并利用定时器处理应用启动延迟。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1  跳到百度网页版

 window.location.href = 'http://api.map.baidu.com/direction?origin=latlng:' + lat + ',' + lng + '|name:停车位&destination=' + name + '&mode=driving&region=石家庄&output=html&src=阿大撒';

 

2 高德

<a href="https://uri.amap.com/marker?position=经度,纬度&name=所在的位置名称">高德地图</a>

3 js 直接调取 手机已经安装的 app

//获取浏览器信息

    var browser = {

        ua : function() {

            var u = navigator.userAgent;

            var isChrome = u.match(/Chrome\/([\d.]+)/)

                || u.match(/CriOS\/([\d.]+)/);

            var isAndroid = u.match(/(Android);?[\s\/]+([\d.]+)?/);

            var iosVersion = function() {

                if (/iP(hone|od|ad)/.test(navigator.platform)) {

                    var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);

                    return [ parseInt(v[1], 10), parseInt(v[2], 10),

                        parseInt(v[3] || 0, 10) ];

                }

            }();

            var chromeVersion = function() {

                var chrome = navigator.userAgent.match(/Chrome\/(\d+)\./);

                if (chrome) {

                    return parseInt(chrome[1], 10);

                }

            }();

            var ios9 = iosVersion && iosVersion[0] >= 9;

            var chrome18 = isChrome && isAndroid && chromeVersion

                && chromeVersion > 18;

            return { // 移动终端浏览器版本信息

                trident : u.indexOf('Trident') > -1, // IE内核

                presto : u.indexOf('Presto') > -1, // opera内核

                webKit : u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核

                gecko : u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, // 火狐内核

                mobile : !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端

                iOS : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端

                android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, // android终端或uc浏览器

                iPhone : u.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器

                iPad : u.indexOf('iPad') > -1, // 是否iPad

                webApp : u.indexOf('Safari') == -1, // 是否web应该程序，没有头部与底部

                weChat : u.indexOf('MicroMessenger') > -1,

                UC : u.indexOf('UCBrowser') > -1,

                u3 : u.indexOf('U3') > -1,

                chrome : u.indexOf('Chrome') > -1,

                windowsPhone : u.indexOf("Windows Phone") > -1,

                samsung : u.indexOf("Samsung") > -1,

                QQ : (u.match(/\sQQ/i) != null ? u.match(/\sQQ/i).toLowerCase() == " qq"

                    : false),

                isChrome : isChrome,

                isAndroid : isAndroid,

                iosVersion : iosVersion,

                chromeVersion : chromeVersion,

                ios9 : ios9,

                chrome18 : chrome18

            };

        }()

    }

    var ua = browser.ua;

    // 打开地图App，开始导航

    function openMapApp(lat, lng, addr) {

            // 地图uri api数组

        var uri = new Array();

        if (ua.android) {

            // 百度地图uri api

            uri[0] = "bdapp://map/navi?location=" + lat + "," + lng + "&query="

                + addr;

            // 高德地图uri api

            uri[1] = "androidamap://navi?sourceApplication=xlwx&poiname=" + addr

                + "&lat=" + lat + "&lon=" + lng + "&dev=1&style=2";

            // 腾讯地图uri api

            uri[2] = "qqmap://map/marker?marker=coord:" + lat + "," + lng

                + ";title:" + addr + "&referer=xlwx";

        } else if (ua.iOS) {

            // 百度地图uri api

            uri[0] = "baidumap://map/navi?location=" + lat + "," + lng + "&query="

                + addr;

// 高德地图uri api

            uri[1] = "iosamap://navi?sourceApplication=xlwx&poiname=" + addr

                + "&lat=" + lat + "&lon=" + lng + "&dev=1&style=2";

// 腾讯地图uri api

            uri[2] = "qqmap://map/marker?marker=coord:" + lat + "," + lng

                + ";title:" + addr + "&referer=xlwx";

// 苹果地图uri api

            uri[3] = "http://maps.apple.com/?sll=" + lat + "," + lng + "&address="

                + addr;

        }

//调用uri

        if(uri.length == 0){

            return;

        }

        window.location.href = uri[0];

//启动定时器time1

        var time1 = setTimeout(function() {

// 若启动应用，则js会被中断较长时间，超出此范围

            window.location.href = uri[1];

        }, 2000);

//启动定时器time2

        var time2 = setTimeout(function() {

// 若启动应用，则js会被中断较长时间，超出此范围

            window.location.href = uri[2];

        }, 4000);

//清除定时器

        window.beforeunload = function() {

            if(time1 != null){

                clearTimeout(time1);

            }

            if(time2 != null){

                clearTimeout(time2);

            }

        }

        window.pagehide = function() {

            if(time1 != null){

                clearTimeout(time1);

            }

            if(time2 != null){

                clearTimeout(time2);

            }

        }

        window.onblur = function() {

            if(time1 != null){

                clearTimeout(time1);

            }

            if(time2 != null){

                clearTimeout(time2);

            }

        }

    }

 

demo

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
     <button onclick="openMapApp(39.940166,116.410234,'我家')">
         点击导航
     </button>
     <script>
         var browser = {

             ua : function() {

                 var u = navigator.userAgent;

                 var isChrome = u.match(/Chrome\/([\d.]+)/)

                     || u.match(/CriOS\/([\d.]+)/);

                 var isAndroid = u.match(/(Android);?[\s\/]+([\d.]+)?/);

                 var iosVersion = function() {

                     if (/iP(hone|od|ad)/.test(navigator.platform)) {

                         var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);

                         return [ parseInt(v[1], 10), parseInt(v[2], 10),

                             parseInt(v[3] || 0, 10) ];

                     }

                 }();

                 var chromeVersion = function() {

                     var chrome = navigator.userAgent.match(/Chrome\/(\d+)\./);

                     if (chrome) {

                         return parseInt(chrome[1], 10);

                     }

                 }();

                 var ios9 = iosVersion && iosVersion[0] >= 9;

                 var chrome18 = isChrome && isAndroid && chromeVersion

                     && chromeVersion > 18;

                 return { // 移动终端浏览器版本信息

                     trident : u.indexOf('Trident') > -1, // IE内核

                     presto : u.indexOf('Presto') > -1, // opera内核

                     webKit : u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核

                     gecko : u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, // 火狐内核

                     mobile : !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端

                     iOS : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端

                     android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, // android终端或uc浏览器

                     iPhone : u.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器

                     iPad : u.indexOf('iPad') > -1, // 是否iPad

                     webApp : u.indexOf('Safari') == -1, // 是否web应该程序，没有头部与底部

                     weChat : u.indexOf('MicroMessenger') > -1,

                     UC : u.indexOf('UCBrowser') > -1,

                     u3 : u.indexOf('U3') > -1,

                     chrome : u.indexOf('Chrome') > -1,

                     windowsPhone : u.indexOf("Windows Phone") > -1,

                     samsung : u.indexOf("Samsung") > -1,

                     QQ : (u.match(/\sQQ/i) != null ? u.match(/\sQQ/i).toLowerCase() == " qq"

                         : false),

                     isChrome : isChrome,

                     isAndroid : isAndroid,

                     iosVersion : iosVersion,

                     chromeVersion : chromeVersion,

                     ios9 : ios9,

                     chrome18 : chrome18

                 };

             }()

         }

         var ua = browser.ua;
         function openMapApp(lat, lng, addr) {

             // 地图uri api数组

             var uri = new Array();

             if (ua.android) {

                 // 百度地图uri api

                 uri[0] = "bdapp://map/navi?location=" + lat + "," + lng + "&query="

                     + addr;

                 // 高德地图uri api

                 uri[1] = "androidamap://navi?sourceApplication=xlwx&poiname=" + addr

                     + "&lat=" + lat + "&lon=" + lng + "&dev=1&style=2";

                 // 腾讯地图uri api

                 uri[2] = "qqmap://map/marker?marker=coord:" + lat + "," + lng

                     + ";title:" + addr + "&referer=xlwx";

             } else if (ua.iOS) {
                 // 百度地图uri api

                 uri[0] = "baidumap://map/navi?location=" + lat + "," + lng + "&query="

                     + addr;

                 // 高德地图uri api

                 uri[1] = "iosamap://navi?sourceApplication=xlwx&poiname=" + addr

                     + "&lat=" + lat + "&lon=" + lng + "&dev=1&style=2";

                 // 腾讯地图uri api

                 uri[2] = "qqmap://map/marker?marker=coord:" + lat + "," + lng

                     + ";title:" + addr + "&referer=xlwx";

                 // 苹果地图uri api

                 uri[3] = "http://maps.apple.com/?sll=" + lat + "," + lng + "&address="

                     + addr;

             }

             //调用uri
             if(uri.length == 0){

                 return;

             }
             window.location.href = uri[0];

             //启动定时器time1

             var time1 = setTimeout(function() {

                 // 若启动应用，则js会被中断较长时间，超出此范围
                 window.location.href = uri[1];

             }, 2000);

             //启动定时器time2

             var time2 = setTimeout(function() {

                 // 若启动应用，则js会被中断较长时间，超出此范围
                 window.location.href = uri[2];

             }, 4000);

             //清除定时器

             window.beforeunload = function() {

                 if(time1 != null){

                     clearTimeout(time1);

                 }

                 if(time2 != null){

                     clearTimeout(time2);

                 }

             }

             window.pagehide = function() {

                 if(time1 != null){

                     clearTimeout(time1);

                 }

                 if(time2 != null){

                     clearTimeout(time2);

                 }

             }

             window.onblur = function() {

                 if(time1 != null){

                     clearTimeout(time1);

                 }

                 if(time2 != null){

                     clearTimeout(time2);

                 }

             }

         }
     </script>
</body>
</html>

 

Ev.小强
关注
前端面试汇总-React
越陌度阡
06-29 1224
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
WEB页面或者H5页面如何打开高德或者百度地图APP导航（实战向）
sha虫剂的博客
11-09 1万+
一、序言 在日常开发中，地图的接入使用在各大app和网站中我们都不难见到，打开方式也各有不同，嵌套内部的，或者是直接打开百度，高德，谷歌等地图app。相对来说，各大地图app的文档写的非常齐全，即使是按照官网示例复制进去也能起到该有的效果，需要用什么功能搜什么功能就是了。唯独打开地图app可能很多小伙伴总是搜不到，所以，本文介绍一下，如何在网页或者H5内调用百度和高德（用这俩的最多，就直接说这俩了） 二、如何在页面内调用地图 其实很简单，基本上来说，看一眼就会了，其实就仅仅只是一个url链接，跳转过去就是了
关于H5项目简单调用手机地图
Hanhanyoona的博客
11-25 1533
h5项目开发中遇到如下需求 点击导航去这里,打开浏览器地图导航.如图 实现方式: 都是直接使用a标签 1. 使用百度地图((可以传经纬度,也可以传中文地址) 遇到的问题:zoom参数配置不起作用 参考:https://lbsyun.baidu.com/index.php?title=uri/api/web 2. 使用高德地图(不能只传中文地址) 参考:https://...
站点地图Web.sitemap的数据库读取
qq_39263716的博客
05-17 396
站点地图Web.sitemap的数据库读取，是借助TreeView实现 就可以和数据库的TreeView动态通用 当次加载完成TreeView数据库读取显示后，允许一次就可以了 读取数据库后，制动写入文件流的Web.sitemap中，代码如下： 1：先添加 TreeView控件 和SiteMapPath控件 到页面中： <asp:TreeView ID="TreeView2" runat="server"> </asp:TreeView> ...
使用JavaScript开发网页地图导航
最新发布
风清扬的专栏
08-09 1112
导航是生活中的一个常见需求，而在互联网时代，网页地图导航成为了人们获取信息和帮助的重要工具。在网页中开发一个地图导航功能，能够提供用户位置定位、路线规划、交通情况等有用的信息，提供便利的同时也提升了用户体验。通过使用Google Maps API，我们可以很方便地在网页中实现地图导航功能，提供用户位置定位、路线规划等有用的信息。上述代码中，getCurrentPosition函数会让浏览器请求用户授权获取位置信息，并在授权成功后回调函数中获取到并处理用户的位置。接下来，我们可以在地图上添加标记点。
android--笔记--正则表达式
程序员的良师益友
08-06 672
要严格的验证手机号码，必须先要清楚现在已经开放了哪些数字开头的号码段，目前国内号码段分配如下： 移动：134、135、136、137、138、139、150、151、157(TD)、158、159、187、188 联通：130、131、132、152、155、156、185、186 电信：133、153、180、189、（1349卫通） 验证手机号： public class C
Html5如何唤起百度地图App的方法
12-13
当用户点击导航按钮时，我们需要判断设备上是否已安装百度地图App，并根据情况选择唤起App进行导航，或者打开Web端的地图导航。 首先，要唤起百度地图App，我们需要使用特定的URI Scheme。对于iOS设备，使用的URI ...
简易PHPWEB手机版V1.5：快速搭建手机网站体验
- **数据调用**：一旦网站部署完成，说明系统可以调取后端数据，可能涉及到数据库的操作，如查询、更新、插入和删除数据等基础操作。 #### 3. 知识点：手机网站的定制与功能拓展 - **定制需求**：对于有进一步定制...
Vue + ElementUI 手撸后台管理网站基本框架(三)登录及导航菜单加载
热门推荐
harsima的博客
09-12 7万+
登录授权 登录及安全 为每个请求增加Token Token超时及刷新机制 创建系统菜单 模拟菜单数据 生成菜单 实现点击一级菜单收回所有其他子菜单 NEXT——主题切换 源码 本系列目录 登录授权 登录及安全 从前端看来，用户的登录和授权看起来感觉十分简单，无非就是输入用户名和密码，传给后台确认登录。但其实这里面还是有很多需要注意的问题，这里简单列举一下： ...
软件产品设计的学习总结
2301_78676016的博客
06-24 594
在小程序中工具型是最符合“用完即走”这个理念的，就像家里的工具一样想要的时候拿出来,如:识图、查公交线路、寄快递、抽奖等小程序，只要打开对应的小程序就可以了，不用的时候也不占用内存。小程序一直是用完即走的使用体验，留存型小程序是我们用来沉淀客户的,需要我们结合自身的产品，发掘能沉淀目标客户的场景，一般需要结合原有APP来开发，开发一款对用户有价值、简单易上手的小程序。③社区:基于微信社交基础,把微信群建立到小程序里，可以长期培养用户的使用习惯，而且可以利用社交的互动性，低成本的完成裂变转化。
html 调取第三方百度地图位置
03-29
<button id="btn">获得我的定位数据</button> <a href="baidumap://map/marker?location=40.047669,116.313082&title;=我的位置&content;=百度奎科大厦&src; =yourCompanyName|yourAppName">地图标点</a>
web导航设计（2）
11-13
web导航设计(Designing Web Navigation)非常不错的chm电子书
navigator对象-通过 userAgent 检测浏览器的版本及平台
qq_46269308的博客
07-31 830
navigator对象- 通过 userAgent 检测浏览器的版本及平台
javascript 判断 ios 的版本号
杂家怪谈
04-06 480
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(
vue项目H5调起高德或百度地图手机应用，或调起高德百度网页版实现导航功能（已实现）
恍若c的博客
04-27 9590
需求说明：H5实现唤起高德和百度地图导航到目标景点的功能 分析：用户通过点击选择使用百度还是高德地图，点击后调用guide方法，判断设备上是否有高德或者百度APP，有就直接调用APP，如果没有就调用网页版.........
【微信开发】-HTML5页面直接调用百度地图API,获取当前位置，直接导航目的地
zyytaiyame的博客
10-12 2万+
HTML5页面直接调用百度地图API,获取当前位置，直接导航目的地 我是应用在微信中，自定义菜单，菜单直接链接到这个HTML5页面，获取当前位置后，页面中定好目的地，这样打开页面后直接进入导航页面 可以省下先发送位置信息后，点确定再出导航，省一步
H5页面调起地图导航
Smile_ping的博客
02-11 1万+
h5页面拉起地图导航 这里再次记录下， 在vue中使用百度地图，点击marker弹窗选择对应导航方式。 文章目录h5页面拉起地图导航效果图拉起导航方式1. 高德地图2. 百度地图3. 腾讯地图vue使用百度地图templatescriptstyle 百度api文档 效果图 拉起导航方式 1. 高德地图 调用方式 http://uri.amap.com/marker?position=lng,lat&name=address&coordinate=gaode&callnati
Android字符串+数字变量方法之%1$s、%1$d的用法
Angelica
05-28 5916
（1）%n$md：代表输出的是整数，n代表是第几个参数，设置m的值可以在输出之前放置空格 （2）%n$ms：代表输出的是字符串，n代表是第几个参数，设置m的值可以在输出之前放置空格 （3）%n$mf：代表输出的是浮点数，n代表是第几个参数，设置m的值可以控制小数位数，如m=2.2时，输出格式为00.00 1.整型 比如：“他今年XX岁了”，这个具体XX岁可能需要从服务端取的，那我们可以...
android中%1$s、%1$d的用法
mattdong1024的专栏
04-06 3181
作用：动态的拼接字符串，使代码更简洁，更易维护、易扩展。 用法：1.整型： 比如：“他今年XX岁了”，这个具体XX岁可能需要从服务端取的，那我们可以这么写<string name="old">他今年%1$d岁了</string> 在程序中:
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值