【百度地图API】圣诞节里不会迷路的麋鹿——驾车导航

简介: 原文:【百度地图API】圣诞节里不会迷路的麋鹿——驾车导航任务描述:   可能大家还不知道,圣诞老人是爱迷路的老爷爷!   今年圣诞节又要到了,圣诞老人又要出来送礼物了。可是,他灰常的迷路呢!   还好,他有一只不会迷路的麋鹿……   如何实现:   建立两个input文本框,分别获得圣诞老人输入的起点和终点。
原文: 【百度地图API】圣诞节里不会迷路的麋鹿——驾车导航

任务描述:

  可能大家还不知道,圣诞老人是爱迷路的老爷爷!

  今年圣诞节又要到了,圣诞老人又要出来送礼物了。可是,他灰常的迷路呢!

  还好,他有一只不会迷路的麋鹿……

 

如何实现:

  建立两个input文本框,分别获得圣诞老人输入的起点和终点。

  当圣诞老人点击OK按钮后,先判断起点和终点文本框内是否为空,为空则需要提示圣诞老人重新输入。

  不为空的情况下,进行查询驾车路线的工作。

  如果没有查询到相应的起点和终点,则需要提示圣诞老人重新输入哦!

 

TIPS:                                                              

啊,悄悄告诉大家,其实,麋鹿也是会迷路的哦~

只不过,它使用了百度地图API,为它量身打造了一套驾车路线查询系统

图示:

img_9a3b5fa3052ec72dc26f25001f260ab2.png

 

运行代码,请点击这里

 

代码:

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< meta name ="keywords" content ="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" />
< meta name ="description" content ="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" />
< title > 圣诞老人的麋鹿 </ title >
< script type ="text/javascript" src ="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.1&services=true" >
</ script >
</ head >
< body >
< div style ="background:url(deer.jpg);height:160px;color:#FFF;width:960px;padding:20px;" >
< h1 > 你要去哪儿啊? </ h1 >
< div style ="clear:both;" >
< div style ="float:left;" >
< p >< label for ="placeStart" > 起点 </ label > : < input type ="text" id ="placeStart" /></ p >
< p >< label for ="placeEnd" > 终点 </ label > : < input type ="text" id ="placeEnd" /></ p >
</ div >
< div style ="float:left;padding:20px 0 0 10px;" >
< button onclick ="findWay();" style ="height:60px;line-height:60px;width:50px;background:#005EAC;color:#FFF;font-size:20px;" >< b > OK </ b ></ button >
</ div >
</ div >
</ div >
< div style ="clear:both;" >
< div style ="float:left;width:500px;height:340px;border:1px solid gray" id ="container" ></ div >
< div id ="divResult" style ="float:left;width:500px;height:340px;background:#eee" ></ div >
</ div >

</ body >
</ html >
< script type ="text/javascript" >
var map = new BMap.Map( " container " );
map.centerAndZoom(
new BMap.Point( 116.404 , 39.915 ), 14 );

function findWay(){
var start = document.getElementById( " placeStart " ); // 设定起点
var end = document.getElementById( " placeEnd " ); // 设定终点
if (start.value.length <= 0 )
{
alert(
" 请输入起点 " ); // 起点为空,弹出警告
start.focus(); // 起点为空,把焦点放在起点处
return ;
}
if (end.value.length <= 0 )
{
alert(
" 请输入终点 " ); // 终点为空,弹出警告
end.focus(); // 终点为空,把焦点放在起点处
return ;
}

var driving = new BMap.DrivingRoute(map, {renderOptions:{ // 创建驾车导航对象
map: map,
panel:
" divResult " ,
autoViewport:
true
}});

driving.setSearchCompleteCallback(
function (result){ // 判断是否有此路线
if (driving.getStatus() == BMAP_STATUS_SUCCESS)
{
}
else
{
alert(
" 没有搜索到路线,请确定起始点是否有效! " );
start.focus();
}
})

driving.search(start.value,end.value);
// 查询路线

}
</ script >

 

该驾车查询,支持跨省查询,如图。

输入起点:北海;终点:天安门。

结果会从广西北海市前往北京市。

img_9cc5e001ebbd608f488b33658acb93d4.jpg

 

目录
相关文章
|
1月前
|
缓存 API 定位技术
使用Python调用百度地图API实现地址查询
使用Python调用百度地图API实现地址查询
100 0
|
1月前
|
自然语言处理 API 语音技术
Python加百度语音API实现文字转语音功能
Python加百度语音API实现文字转语音功能
52 0
|
3月前
|
JSON JavaScript 定位技术
Vue中使用echarts@4.x中国地图及AMap相关API的使用
Vue中使用echarts@4.x中国地图及AMap相关API的使用
155 0
Vue中使用echarts@4.x中国地图及AMap相关API的使用
|
4月前
|
SQL 存储 DataWorks
DataWorks中API、desc、数据地图,这3个怎么对起来?
DataWorks中API、desc、数据地图,这3个怎么对起来?
40 0
|
4月前
|
定位技术 API
百度地图API的使用教程以及案例(二)
百度地图API的使用教程以及案例
|
4月前
|
定位技术 API 容器
百度地图API的使用教程以及案例(一)
百度地图API的使用教程以及案例
|
5月前
|
定位技术 API 开发者
百度地图API的使用示例
百度地图API的使用示例
35 0
|
15天前
|
缓存 前端开发 API
API接口封装系列
API(Application Programming Interface)接口封装是将系统内部的功能封装成可复用的程序接口并向外部提供,以便其他系统调用和使用这些功能,通过这种方式实现系统之间的通信和协作。下面将介绍API接口封装的一些关键步骤和注意事项。
|
21天前
|
监控 前端开发 JavaScript
实战篇:商品API接口在跨平台销售中的有效运用与案例解析
随着电子商务的蓬勃发展,企业为了扩大市场覆盖面,经常需要在多个在线平台上展示和销售产品。然而,手工管理多个平台的库存、价格、商品描述等信息既耗时又容易出错。商品API接口在这一背景下显得尤为重要,它能够帮助企业在不同的销售平台之间实现商品信息的高效同步和管理。本文将通过具体的淘宝API接口使用案例,展示如何在跨平台销售中有效利用商品API接口,以及如何通过代码实现数据的统一管理。
|
1月前
|
安全 算法 API
产品经理必备知识——API接口
前言 在古代,我们的传输信息的方式有很多,比如写信、飞鸽传书,以及在战争中使用的烽烟,才有了著名的烽火戏诸侯,但这些方式传输信息的效率终究还是无法满足高速发展的社会需要。如今万物互联的时代,我通过一部手机就可以实现衣食住行的方方面面,比如:在家购物、远程控制家电、自动驾驶等等,背后都离不开我们今天要聊的API接口。