【百度地图API】如何利用地图API制作汽车沿道路行驶的动画?——如何获得道路层数据

简介: 原文:【百度地图API】如何利用地图API制作汽车沿道路行驶的动画?——如何获得道路层数据有几个做汽车导航的朋友问我说,他们想在地图上制作一辆车沿着道路行驶的动画。可是,百度地图的道路数据并没有公开。
原文: 【百度地图API】如何利用地图API制作汽车沿道路行驶的动画?——如何获得道路层数据

有几个做汽车导航的朋友问我说,他们想在地图上制作一辆车沿着道路行驶的动画。可是,百度地图的道路数据没有公开。所以,应该怎么办呢?

一、

我们先来学习如何把百度地图“弄”出来。把下面这段代码保存为htm格式,用浏览器打开,就能看到百度地图了。 

< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 点沿直线运动 </ title >
< script type ="text/javascript" src ="http://api.map.baidu.com/api?v=1.2&services=true" ></ script >
</ head >
< body >
< div style ="width:520px;height:340px;border:1px solid gray" id ="container" ></ div >
</ body >
</ html >
< script type ="text/javascript" >
var map = new BMap.Map( " container " ); // 创建地图容器
map.centerAndZoom( new BMap.Point( 116.404 , 39.915 ), 15 ); // 设置中心点和地图级别
</ script >

二、

再分析一下汽车导航制作者的这个需求:

1、车辆——用自定义图片的marker实现

var carMk = new BMap.Marker(pts[ 0 ],{icon:myIcon});
var myIcon = new BMap.Icon( " Mario.png " , new BMap.Size( 32 , 70 ), { // 小车图片
// offset: new BMap.Size(0, -5), //相当于CSS精灵
imageOffset: new BMap.Size( 0 , 0 ) // 图片的偏移量。为了是图片底部中心对准坐标点。
});

2、获取道路数据——虽然百度地图API并未公开道路层数据,但我们可以巧妙的“拿到”。具体请往下看。

三、

如何利用百度地图API拿到道路层的数据呢?

答案很简单:驾车导航。

首先讨论一下,为什么要用驾车导航,而不用步行和公交导航?

1、步行导航:步行导航显然能“穿越”公园、甚至小区,得到的肯定不是道路层的数据;

2、公交导航:公交导航虽然都是道路层的数据,但很局限,因为只有有公交车的地方,才有公交方案。并且,公交方法是包含了地铁线路的。

3、驾车导航:拥有所有道路层的数据,并且没有地铁、小区里、花园内这样的无效数据。

驾车导航示例:

var myP1 = new BMap.Point( 116.380967 , 39.913285 ); // 起点
var myP2 = new BMap.Point( 116.424374 , 39.914668 ); // 终点
var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true }}); // 驾车实例
driving2.search(myP1, myP2); // 显示一条公交线路

四、

那么,如何获得道路层的数据呢?

我们可以想象一下,驾车导航的路线,在API中是属于折线。

折线是由无数的点构成的。

也就是说,只要找到这些点,我们就能获取道路层的数据了。

我们发现,Route里有个接口getPath,可以获得路线的地理坐标点数组。并且,以point数组的形式返回。

Route类参考:http://dev.baidu.com/wiki/map/index.php?title=Class:%E6%9C%8D%E5%8A%A1%E7%B1%BB/Route

利用创建好的驾车实例DrivingRoute,先search,得到一个驾车方案;

驾车方案中,选择第一条Route;

最后获得该Route的全部点。

注意,由于ajax的异步加载机制,我们需要利用搜索后的回调函数setSearchCompleteCallback,来进行道路数据的获得。

driving.setSearchCompleteCallback( function (){
var pts = driving.getResults().getPlan( 0 ).getRoute( 0 ).getPath(); // 通过驾车实例,获得一系列点的数组
var paths = pts.length; // 获得有几个点
}

五、

道路数据获取完毕。接下来是汽车图片的展示。可以通过改变marker的坐标点来实现,改变marker坐标的接口setPosition。

我们假设每100毫秒改变一次,利用延时函数setTimeout。

同样,由于ajax异步加载原因,需要异步给i赋值。

i = 0 ;
function resetMkPoint(i){
carMk.setPosition(pts[i]);
if (i < paths){
setTimeout(
function (){
i
++ ;
resetMkPoint(i);
},
100 );
}
}
setTimeout(
function (){
resetMkPoint(
1 );
console.log(i);
},
100 )

六、

接下来,可以点击这里,运行示例

点击左侧的“开始”按钮,动画开始播放。

点击下侧的“获取代码”按钮,可得到全部源代码。

七、

最后,放出全部源代码:

< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 点沿直线运动 </ title >
< script type ="text/javascript" src ="http://api.map.baidu.com/api?v=1.2&services=true" ></ script >
</ head >
< body >
< div style ="width:520px;height:340px;border:1px solid gray" id ="container" ></ div >
< input type ="button" value ="开始" onclick ="run();" />
</ body >
</ html >
< script type ="text/javascript" >
var map = new BMap.Map( " container " );
map.centerAndZoom(
new BMap.Point( 116.404 , 39.915 ), 15 );
var myP1 = new BMap.Point( 116.380967 , 39.913285 ); // 起点
var myP2 = new BMap.Point( 116.424374 , 39.914668 ); // 终点
var myIcon = new BMap.Icon( " Mario.png " , new BMap.Size( 32 , 70 ), { // 小车图片
// offset: new BMap.Size(0, -5), //相当于CSS精灵
imageOffset: new BMap.Size( 0 , 0 ) // 图片的偏移量。为了是图片底部中心对准坐标点。
});
var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true }}); // 驾车实例
driving2.search(myP1, myP2); // 显示一条公交线路

function run(){
var driving = new BMap.DrivingRoute(map); // 驾车实例
driving.search(myP1, myP2);
driving.setSearchCompleteCallback(
function (){
var pts = driving.getResults().getPlan( 0 ).getRoute( 0 ).getPath(); // 通过驾车实例,获得一系列点的数组
var paths = pts.length; // 获得有几个点

var carMk = new BMap.Marker(pts[ 0 ],{icon:myIcon});
map.addOverlay(carMk);
i
= 0 ;
function resetMkPoint(i){
carMk.setPosition(pts[i]);
if (i < paths){
setTimeout(
function (){
i
++ ;
resetMkPoint(i);
},
100 );
}
}
setTimeout(
function (){
resetMkPoint(
5 );
console.log(i);
},
100 )

});
}
</ script >
目录
相关文章
|
25天前
|
存储 数据挖掘 BI
API数据源:轻松接入各类业务系统数据
在数字化转型中,企业面临多样化的数据需求。Quick BI推出API数据源功能,支持广泛的数据接入,包括实时天气、电商交易及内部业务数据,极大丰富了可分析数据范围。该功能提供灵活的连接方式(抽取和直连模式)、多元授权机制(基础认证、前置请求)和自动化数据解析,降低了操作门槛,提升了配置效率。通过动态Token获取等最佳实践,确保数据安全与实时性,满足企业具体业务需求。了解更多,请访问Quick BI官方文档或瓴羊官网。
152 77
|
4天前
|
数据采集 监控 搜索推荐
深度解析淘宝商品详情API接口:解锁电商数据新维度,驱动业务增长
淘宝商品详情API接口,是淘宝开放平台为第三方开发者提供的一套用于获取淘宝、天猫等电商平台商品详细信息的应用程序接口。该接口涵盖了商品的基本信息(如标题、价格、图片)、属性参数、库存状况、销量评价、物流信息等,是电商企业实现商品管理、市场分析、营销策略制定等功能的得力助手。
|
28天前
|
JSON 前端开发 搜索推荐
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
|
15天前
|
搜索推荐 数据挖掘 API
怎么利用商品详情 API 接口实现数据获取与应用?
在电商蓬勃发展的时代,数据成为驱动业务增长的关键。商品详情API接口为电商从业者、开发者和数据分析爱好者提供了获取海量商品数据的途径,助力精准营销、优化用户体验和提升运营效率。本文深入探讨如何利用商品详情API接口进行数据获取与应用,涵盖接口概念、工作原理、不同平台特点、准备工作、数据获取及处理、错误处理,并通过代码示例展示其在电商平台展示、数据分析、竞品分析和个性化推荐等场景中的应用。
35 12
|
21天前
|
JSON 缓存 API
解析电商商品详情API接口系列,json数据示例参考
电商商品详情API接口是电商平台的重要组成部分,提供了商品的详细信息,支持用户进行商品浏览和购买决策。通过合理的API设计和优化,可以提升系统性能和用户体验。希望本文的解析和示例能够为开发者提供参考,帮助构建高效、可靠的电商系统。
35 12
|
14天前
|
搜索推荐 API 开发者
深度解析:利用商品详情 API 接口实现数据获取与应用
在电商蓬勃发展的今天,数据成为驱动业务增长的核心。商品详情API接口作为连接海量商品数据的桥梁,帮助运营者、商家和开发者获取精准的商品信息(如价格、描述、图片、评价等),优化策略、提升用户体验。通过理解API概念、工作原理及不同平台特点,掌握获取权限、构建请求、处理响应和错误的方法,可以将数据应用于商品展示、数据分析、竞品分析和个性化推荐等场景,助力电商创新与发展。未来,随着技术进步,API接口将与人工智能、大数据深度融合,带来更多变革。
47 3
|
26天前
|
供应链 API 开发者
解锁电商数据的无限可能:探秘京东商品SKU信息API接口
京东商品SKU信息API接口是电商开发与运营中的重要工具,帮助开发者获取商品的详细属性,如库存、价格、规格等。通过该接口,电商平台可以丰富商品展示页面,提升用户体验;商家能实时掌握库存动态,优化销售策略;数据分析人员可深入洞察市场趋势,实现精准营销。使用前需注册京东开放平台账号、创建应用并获取API权限,同时仔细阅读API文档以确保正确调用。代码示例展示了如何用Python调用该接口,并处理返回数据。未来,该接口将在个性化推荐、智能库存管理和数据分析等领域发挥更大作用,助力电商业务创新与发展。
79 14
|
17天前
|
缓存 监控 API
如何查看商品销量 API 接口的性能指标数据
在电商蓬勃发展的时代,数据驱动业务决策至关重要。商品销量作为核心指标,依赖高效稳定的API接口获取。本文探讨如何查看和优化商品销量API的性能指标,包括响应时间、吞吐量、错误率和并发用户数,通过专业工具、日志分析及自定义代码实现监控与优化,确保业务稳定运行和用户体验提升。
31 2
|
1月前
|
监控 API 数据处理
速卖通商品数据尽在掌握:揭秘高效利用API接口获取详情策略
速卖通(AliExpress)API助力电商数据处理与分析,提供商品搜索、价格监控等功能。开发者需注册账号、创建应用并获取API Key。常用接口包括商品搜索和详情API。调用时注意频率限制、数据延迟及错误处理。本文介绍全过程并附Python示例代码,帮助提升电商运营效率。
|
2月前
|
数据采集 数据可视化 前端开发
怎么通过API获取电竞赛事实时数据
选择合适的电竞数据API是开发电竞应用的关键。主流API包括OP.GG、Liquipedia、Stratz、Riot Games和熊猫比分,涵盖LOL、DOTA2等游戏的实时数据。注册并获取API密钥后,需仔细阅读文档,了解资源、请求方法、必需参数及响应格式。编写代码调用API时,注意优化请求频率,避免封禁。最后,通过Web界面或可视化工具展示数据,如React/D3.js、Tableau等。示例代码展示了如何使用熊猫比分API获取即将开始的比赛信息。