通过URL传值在手机端打开一键导航

通过URL传值在手机端打开一键导航

百度一键导航接收url 然后在手机端调用百度地图导航，如果手机按装了百度地图就会自动调起百度地图这个功能我研究了好久现在这个效果比较满意借鉴了好多大佬的东西，

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>HTML5页面调用百度地图API,获取当前位置并导航到目的地</title>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=oV3nwFU8cORhbhsenBvYuWDpG8NsyFjO"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!--调用jQuery--><style type="text/css">body,html,#allmap {width: 100%;height: 100%;overflow: hidden;margin: 0;font-family: "微软雅黑";}
</style></head><body><div id="allmap"></div>
</body></html>
<script type="text/javascript">// 读取url 传值 fid=XXX//通过url传值来进行一KEY导航// mapapibaiduv7.html?company=小明同学&a=1&b=2&c=3// mapapibaiduv7.html?title=caimaibao_lbs...&jingdu=45.768246&weidu=126.766338 // mapapibaiduv7.html?title=caimaibao_lbs...jingdu=45.768246weidu=126.766338function GetQueryString(title) {var reg = new RegExp("(^|&)" + title + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]); return null;}// 调用方法alert(GetQueryString("title"));alert(GetQueryString("jingdu"));alert(GetQueryString("weidu"));var jingweidu= GetQueryString("jingdu") + ',' + GetQueryString("weidu");var map = new BMap.Map("allmap");var point = new BMap.Point(jingweidu);map.centerAndZoom(point, 20);map.enableScrollWheelZoom();var myIcon = new BMap.Icon("/assets/img/center.gif", new BMap.Size(30, 30), {anchor: new BMap.Size(10, 10)});var marker = new BMap.Marker(point, { icon: myIcon });map.addOverlay(marker);var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function (r) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {var mk = new BMap.Marker(r.point);map.addOverlay(mk);//map.panTo(r.point);//地图中心点移到当前位置var latCurrent = r.point.lat;var lngCurrent = r.point.lng;//alert('我的位置：'+ latCurrent + ',' + lngCurrent);location.href = "http://api.map.baidu.com/direction?origin=" + latCurrent + "," + lngCurrent + "&destination="+jingweidu+"&mode=driving&region=哈尔滨市&output=html";}else {alert('failed' + this.getStatus());}}, { enableHighAccuracy: true })map.addOverlay(marker);var licontent = "<b>采买宝:正在根据您的GPS位置正载载入一健导航</b>";// licontent += "<span><strong>地址：</strong>哈尔滨市禧龙五金市场东区2街区A栋3号</span><br>";// licontent += "<span><strong>电话：</strong>15945666763</span><br>";var opts = {width: 200,height: 80,};var infoWindow = new BMap.InfoWindow(licontent, opts);marker.openInfoWindow(infoWindow);marker.addEventListener('click', function () {marker.openInfoWindow(infoWindow);});</script>

承接APP开发，公众号小程序，最近一起在学习Fastadmin QQ 350400138 接各种大小活

借鉴了 https://www.cnblogs.com/jinshuo/p/8074052.html 这位大佬的文章

通过URL传值在手机端打开一键导航相关推荐

HBulider 连接手机，在手机端展示
连接手机端一般有俩种方法: 1. 真机调试(app) 2. 设置外部web 服务器调用url(h5页面) 1. 真机调试(app) 这个方法比较常用,步骤: 1.插上数据线 2.手机打开开发者模式( ...
在手机端浏览器模拟F12（实用小工具）
大家可能会遇到一些谷歌浏览器模拟手机端没问题,但是真机上会出现的bug,真机上没有F12,很难定位bug原因. 偶尔找到一款工具,可以方便的在手机端打开F12,记录一下分享给大家. 这款工具就是vco ...
利用pdf.js在手机端网页中直接打开PDF文档
在项目中用到了需要在手机端直接打开PDF文档的情况,借鉴网友们的意见使用了pdf.js,测试了一下简单好用,下面是使用例子 <!DOCTYPE html> <html> < ...
h5端登录是什么意思_如何让电脑端配置的host在手机端生效（MVVM项目开发测试）...
如何让电脑端配置的host在手机端生效 1.电脑上安装node版本不要太老下载地址: 安装完成后验证命令 :node -v 2.安装全局whistle 安装命令:npm install whistl ...
APICloud中app如何在手机端测试
首先假设你已经有了APICloud账号,并创建了App项目. 需要注意的是,手机和电脑需要连接在同一wifi环境下. 第一步下载自定义Loader 进入"开发控制台" 点击我们的 ...
HTML5中的audio在手机端和微信端的不能自动播放
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流量所设置的通常解决方法是给一个交互事件: 标签: <audio loop ...
【教程】如何在微信公众号的菜单栏设置点击菜单一键导航
公众号菜单一键导航设置(如图片无法显示,请访问官方文档) 如何在菜单上添加一键导航呢,小程序"小正方助手"帮助你,点击弹出微信原生地图并可以选择在其他地图app中打开. 方式一:使 ...
HTML5中的audio在手机端和微信端的自动播放
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的通常解决方法是给一个交互事件,一定要是交互事件标签:<aud ...
如何在手机端从多个Excel文件多个Sheet中搜索某一内容，多个excel文件批量查找
如何在手机端从多个Excel文件多个Sheet中搜索某一内容,多个excel文件批量查找今天介绍一个在线工具:e.anyoupin.cn 比如: 多个年度的项目信息,每年一张工作簿.现在需要查找某些 ...

通过URL传值在手机端打开一键导航

通过URL传值在手机端打开一键导航相关推荐

最新文章

热门文章