解宝明2017/03/02         
百度地图Web服务API为开发者提供http接口,即开发者通过http形式发起检索请求,获取返回json或xml格式的检索数据。
进入百度地图官网,注册并登录,然后申请秘钥。
接下来带领大家熟悉百度地图webAPI,并应用API开发一个小应用
API简介
1.PlaceAPI
支持城市、矩形及圆形区域关键字检索POI,返回json/xml格式的POI数据。
var ak = 'hNwsSIXFOPTIQQuze00VDuYydoIXgAFF'; var url = 'http://api.map.baidu.com/place/v2/search?q=饭店®ion=北京&output=json&ak='+ak; $.getJSON(url + '&callback=?',function (res) { if (res.status === 0) { console.log(res) }else{ alert('没有找到该地址信息') } })参数含义
ak:秘钥
2.PlacesuggestionAPI
提供匹配用户输入关键字的辅助信息、提示接口、返回json/xml格式的建议词条数据。
var ak = 'hNwsSIXFOPTIQQuze00VDuYydoIXgAFF'; var url = 'http://api.map.baidu.com/place/v2/suggestion?q=天安门®ion=北京市&city_limit=true&output=json&ak='+ak; $.getJSON(url + '&callback=?',function (res) { if (res.status === 0) { console.log(res) }else{ alert('没有找到该地址信息') } })参数含义
ak:秘钥
3.GeocodingAPI
var ak = 'hNwsSIXFOPTIQQuze00VDuYydoIXgAFF'; var url = 'http://api.map.baidu.com/geocoder/v2/?output=json&ak='+ak+'&address=北京市' $.getJSON(url + '&callback=?',function (res) { if (res.status === 0) { console.log(res) }else{ alert('没有找到该地址信息') } })参数含义
ak:秘钥
4.DirectionAPI
var ak = 'hNwsSIXFOPTIQQuze00VDuYydoIXgAFF'; var url = 'http://api.map.baidu.com/direction/v1?mode=driving&origin=清华大学&destination=北京大学&origin_region=北京&destination_region=北京&output=json&ak='+ak; $.getJSON(url + '&callback=?',function (res) { if (res.status === 0) { console.log(res) }else{ alert('没有找到该地址信息') } })参数含义
ak:秘钥
5.IP定位API
var ak = 'hNwsSIXFOPTIQQuze00VDuYydoIXgAFF'; var url = 'http://api.map.baidu.com/location/ip?ip=123.114.62.230&coor=bd09ll&ak='+ak; $.getJSON(url + '&callback=?',function (res) { if (res.status === 0) { console.log(res) }else{ alert('没有找到该地址信息') } })参数含义
ak:秘钥
6.RouteMatrixAPI
var ak = 'hNwsSIXFOPTIQQuze00VDuYydoIXgAFF'; var url = 'http://api.map.baidu.com/routematrix/v2/driving?output=json&origins=40.45,116.34|40.54,116.35&destinations=40.34,116.45|40.35,116.46&ak='+ak; $.getJSON(url + '&callback=?',function (res) { if (res.status === 0) { console.log(res) }else{ alert('没有找到该地址信息') } })参数含义
ak:秘钥
应用API开发应用
这个应用很简单,如下图所示:
思路很简单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小应用</title> </head> <body> <h3>当前城市:<span id="city"></span></h3> <p>起点:<input type="text" id="src"></p> <p>终点:<input type="text" id="des"></p> <p><button type="button" id="search">查询</button></p> <div id="result"></div> <script src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></script> <script src="http://cdn.staticfile.org/jquery/1.11.2/jquery.min.js"></script> <script> var $search = $("#search"); var $src = $("#src"); var $des = $("#des"); var $result = $("#result") var ak = 'hNwsSIXFOPTIQQuze00VDuYydoIXgAFF'; var city = remote_ip_info['city']; $('#city').html(city); $search.on('click',function(){ var srcVal = $src.val(); var desVal = $des.val(); if (!srcVal || !desVal) { return false } getRoute(srcVal,desVal) }) // 获取路程信息 function getRoute(begin,end) { var url = 'http://api.map.baidu.com/direction/v1?mode=driving&origin='+begin+'&destination='+end+'&origin_region='+city+'&destination_region='+city+'&output=json&ak='+ak; $.getJSON(url + '&callback=?',function (res) { if (res.status === 0) { // console.log(res) var html = '<p>从<b>'+res.result.origin.cname+' ' +res.result.origin.wd+'</b>'; html += '到'+res.result.destination.cname+' ' +res.result.destination.wd+'</b></p>'; html += '<p>距离:'+getKM(res.result.routes[0].distance)+'</p>' html += '<p>耗时:'+formatSeconds(res.result.routes[0].duration)+'</p>' html += '<ul>' $.each(res.result.routes[0].steps,function (index,value) { html += '<li>'+(index+1)+':'+value.instructions+'。路段长度:'+getKM(value.distance)+'。耗时:'+formatSeconds(value.duration)+'</li>' }) html += '</ul>' $result.append(html) }else{ alert('没有找到该地址信息') } }) } // 米转千米 function getKM(m) { return m/1000 + '千米' } // 秒转时分秒 function formatSeconds(value) { var theTime = parseInt(value);// 秒 var theTime1 = 0;// 分 var theTime2 = 0;// 小时 // alert(theTime); if(theTime > 60) { theTime1 = parseInt(theTime/60); theTime = parseInt(theTime%60); // alert(theTime1+"-"+theTime); if(theTime1 > 60) { theTime2 = parseInt(theTime1/60); theTime1 = parseInt(theTime1%60); } } var result = ""+parseInt(theTime)+"秒"; if(theTime1 > 0) { result = ""+parseInt(theTime1)+"分"+result; } if(theTime2 > 0) { result = ""+parseInt(theTime2)+"小时"+result; } return result; } </script> </body> </html>总结
176****9964 2017/05/09
回复
- 2017/04/05
回复
- 2017/04/05
回复
。。。。。。 2017/04/04
回复