浏览器端调用百度API获取路线数据，手动实现境外路线规划

最新推荐文章于 2023-05-09 15:09:17 发布
VIP文章 最新推荐文章于 2023-05-09 15:09:17 发布
阅读量853 收藏 1
点赞数 1
分类专栏： JavaScript 笔记 文章标签： 百度 js json JavaScript javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/late_whale/article/details/107618112
版权

文章目录

前言

前两天老师带我们的nybike项目中，需要自己添加一个地图功能，我很幸运的选中了路线规划(之前我还一直以为可以像国内的那样，几句代码就可以实现了)，可现实很骨感，在经过无数次心力交瘁之后，才堪堪实现了这个破功能。
在这里插入图片描述

思路

申请ak

首先是申请一个服务端ak，因为浏览器端没有境外路线规划权限
百度地图应用创建在这里插入图片描述

查看api

查看web API，弄清使用的方式
百度地图web API
在这里插入图片描述
总结： 通过http请求来获取路线数据，请求中起点终点经纬度必填，ak必填

观察数据

通过api中的例子，换上自己的ak，在浏览器地址栏中输入

http://api.map.baidu.com/direction_abroad/v1/driving?origin=40.702963,-73.907852&destination=40.625416,-73.960852&ak=您的AK

最低0.47元/天 解锁文章
Late whale
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
易语言调用api实现文件拖放获取路径的代码
08-26
今天小编就为大家分享一篇关于易语言调用api实现文件拖放获取路径的代码，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
python 调用API接口 获取和解析 Json数据
12-17
任务背景： 调用API接口数据，抽取我们所需类型的数据，并写入指定mysql数据库。 先从宏观上看这个任务，并对任务进行分解： step1：需要学习python下的通过url读取数据的方式； step2：数据解析，也是核心部分，数据格式从python角度去理解，是字典？列表？还是各种嵌套？ step3：连接mysql数据库，将数据写入。 从功能上看，该数据获取程序可以分为3个方法，即step1对应方法request_data()，step2对应方法parse_data()，step3对应data_to_db()。 第一轮，暂不考虑异常，只考虑正常状态下的功能实现。 1、先看request_da
vue cli3 调用百度翻译API翻译页面的实现示例
10-16
主要介绍了vue cli3 调用百度翻译API翻译页面的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
易语言调用百度API获取IP归属地的代码
08-26
今天小编就为大家分享一篇关于易语言调用百度API获取IP归属地的代码，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
百度地图API，不使用关键字获取周边所有的POI（道路、餐馆、小区等所有信息）
Rock的专栏
06-08 2500
应用场景：获取指定位置周边的所有POI，如小区、餐馆、道路、酒店等，用于让用户选择。 直接上代码 <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(101.76792099,36.64073861); map.centerAndZoom(point,16); var top_left_control = new BMap
【百度地图】vue3+百度地图API实现全球导航，附源码
qq_42552251的博客
05-09 2889
你要实现导航服务，首先就要有个起始点，这两个点可以是用户输入的，也可以是让用户在地图点选，这里就选择点选方式获取起始点，然后用这两个点去查询可行的路线方案，最后再把这些路线分别展示到地图上。如果是要直接在中国大陆境内使用导航的话可以直接使用sdk提供的方法，选择起始点还是用上面的方法，传参给以下方法就可以直接使用，调用这个方法会自动生成起始点图标和路径，通过配置参数还能默认将视角定位到此处，非常方便。至此，就完成了基础的境外路线规划功能，可以在地图上选起始点调取WebAPI接口获取路线信息然后绘制路线。
python地铁路线可视化
热门推荐
gdhy9064的博客
05-10 1万+
本文记录了如何在python下利用百度api获取地铁站点及地铁精细路线（轨迹）的百度墨卡托坐标（BD09MC）数据并转化为WGS-84坐标系下的经纬度，使用 plotly+mapbox 绘制地铁路线图，并通过修改生成的html / js代码将地图默认语言设置为中文。...
获取全国地铁线站口数据（Python+百度API）
qq_22270229的博客
12-30 1813
获取全国地铁线站口数据，需要用到Python和百度API
主流地图api（包括海外地图）的分析以及使用
qq_17413495的博客
05-22 6970
背景 在网站或者手机应用中，经常用到地图api。现在市场不断的涌现各种地图，国内市场当然可以随意使用，除了Google地图之外！因为在一个伟大而神奇的国度，是不允许Google肆意妄为的。尽管如此也不能否认Google地图在国际地图市场的统治力和影响力！ 问题 在最近的项目需求分析中，将会用到国外地图、地位以及路线检索的功能。产品设计出来之前，我们需要做的事就是调研和分析-哪些地图在国外好用呢？如何集成？收费情况呢？等等… 调研分析 高德地图API–海外版 目前海外服务提供了地图、定位、POI搜索（包括
一款基于百度地图API做成的地区地图
02-18
插件描述：可根据xml返回的数据控制插件，也可以本地控制插件、地区三级级联查询、地区联动地图的插件，在线搜索. 参考示例：http://www.jq22.com/jquery-info5915
c# 调用百度地图API 代码示例
04-23
将百度地图嵌入c# cs窗体中，cs...查了很多资料，参考网上众多朋友的代码及百度地图API demo,这个例子中的js代码不用key，方便很多，使用的是v1.4版，少了很多限制，使用.net4.5开发的，可以将c#代码转为低版本也行的。
利用百度地图API查询任意两点间的车行距离、时间和通过的道路名称
flyh630的博客
04-15 4518
最近做项目，领导让我分析一下某火车站的现状可达性。参考 http://www.360doc.com/content/19/1102/23/32862047_870744265.shtml https://blog.csdn.net/taijiedi13/article/details/51279959 这两篇文章，我决定仿照来做一下。 由于没有python和gis基础，在模仿的过程中遇到了很多困难...
百度地图api路况信息
ml_yz的博客
08-02 1万+
效果图： 首先需要引入css\js <link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="htt...
利用百度地图api，自定义起始点进行驾车路线的搜索，并可以根据不同驾车策略给出驾驶指导
qq_27387133的博客
01-18 2282
利用百度地图api，通过在输入框（带自动填充）输入起始点，然后根据用户选择的不同驾车策略来进行驾车路线搜索并显示具体的路线信息。驾车策略共三种，默认路线（时间最短）、最短路程、不走高速。左侧搜索栏可以进行伸展收缩。效果图如下： 相关实现如下： 1.引入相关的css <link rel="stylesheet" type="text/css" href="/baidu_map_in...
Python通过百度API接口获取路段车辆实时速度
weixin_42562567的博客
11-17 1960
通过百度API接口获取路段车辆实时速度
基于python和百度接口实现实时获取给定位置区域附近路段交通拥堵情况
weixin_54309935的博客
03-21 2033
基于python和百度接口实现实时获取给定位置区域附近路段交通拥堵情况
如何用js调用百度地图api接口
qq_42181069的博客
05-25 1万+
首先，依然是将效果图给大家看一下： 操作步骤： 1、先百度搜索百度地图api 2、登录进去，找到javascript API，下载下来 3、然后点击控制台，点应用，新建一个应用，然后就会有一个api 4、在javascript页面有很多功能，大家可以根据自己的需求选择，这里我选取的就是地图上那个红点，然后还有就是默认的坐标是北京的经纬度，大家可以自己...
百度地图 JavaScript API
DLNovice的博客
03-08 3777
文章目录1、账号申请2、创建应用3、使用地图介绍示例4、具体使用控件个性地图带高度的点（标记地点、覆盖物）点击事件 参考资料：入门百度地图 JavaScript API | 8月更文挑战 - 掘金 (juejin.cn) 1、账号申请 先申请成为百度开发者（需要填写身份证信息、申请理由等），创建地图应用生成 AK。 百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com) 一般会秒同意，所以不用担心时间问题 2、创建应用 注意 应用类型选择浏览器端。 白名单输入*号，所有地
vue调用百度api获取当前位置
最新发布
06-03
要调用百度API获取当前位置，可以使用百度地图JavaScript API。以下是使用Vue.js实现的代码示例： 1. 在index.html中引入百度地图JavaScript API： ```html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script> ``` 其中，你需要替换“你的ak”为你申请的百度地图API的AK值。 2. 在Vue组件中定义获取当前位置的方法： ```javascript export default { data() { return { currentPosition: null, }; }, methods: { getCurrentPosition() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position) => { const point = new BMap.Point(position.coords.longitude, position.coords.latitude); const geoc = new BMap.Geocoder(); geoc.getLocation(point, (rs) => { const addr = rs.addressComponents; this.currentPosition = `${addr.province}${addr.city}${addr.district}${addr.street}${addr.streetNumber}`; }); }, (err) => { console.log(err); } ); } else { console.log("浏览器不支持Geolocation"); } }, }, }; ``` 这里使用了HTML5的Geolocation API获取当前位置，然后使用百度地图JavaScript API的Geocoder类将获取到的经纬度转化为地址字符串。 3. 在Vue组件模板中调用getCurrentPosition方法并显示当前位置： ```html <template> <div> <button @click="getCurrentPosition">获取当前位置</button> <p v-if="currentPosition">{{ currentPosition }}</p> </div> </template> ``` 这里使用了Vue的条件渲染功能，在获取到当前位置后才显示当前位置字符串。 注意：由于需要使用浏览器的Geolocation API，所以需要在HTTPS协议下运行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值