大讲台分享应用百度地图Web API开发小应用

当前位置：首页 / 福利社 / 分享 / 大讲台分享应用百度地图Web API开发小应用

大讲台分享应用百度地图Web API开发小应用

解宝明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('没有找到该地址信息')
    }
})

参数含义
q：检索关键字
region：检索区域（在城市检索有效）
output：输出格式

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('没有找到该地址信息')
    }
})

参数含义
q：检索关键字
region：指定区域，可能返回其他区域结果，禁止返回其他区域结果需要配合city_limit
city_limit：当为true时，只返回指定区域的结果
output：输出格式

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('没有找到该地址信息')
    }
})

参数含义
address：地址
output：输出格式

ak：秘钥

4.DirectionAPI
支持公交、驾车、步行查询检索服务，返回json/xml格式的线路数据。

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('没有找到该地址信息')
    }
})

参数含义
mode：导航模式包括：driving（驾车）、walking（步行）、transit（公交）、riding（骑行）
origin：起点名称或经纬度
destination：终点名称或经纬度
origin_region：起点所在城市
destination_region：终点所在城市
output：输出类型

ak：秘钥

5.IP定位API
根据IP获取用户的位置信息。

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('没有找到该地址信息')
    }
})

参数含义
ip：检索的ip地址
coor：输出的坐标格式，coor=bd09ll时，返回为百度经纬度坐标。

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('没有找到该地址信息')
    }
})

参数含义
origins：起点，用经纬度表示，多个经纬度用|分开
destinations：终点，用经纬度表示，多个经纬度用|分开
output：输出格式

ak：秘钥

应用API开发应用

这个应用很简单，如下图所示：

思路很简单
1.获取当前城市根据，需要借助新浪api接口。当然也可以采用其他方法获取当前城市。
2.根据输入的起点和终点，获取路程信息。

<!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>

总结
上面的例子很精简，很多地方需要优化。比如：
我们获取到的检索信息都包含了的经纬度信息，我们可以根据经纬度把地点绘制在地图上（如echarts组件知道经纬度就能在地图中绘制出地点），在加上交互效果，就能开发出丰富多彩的地图服务应用。

看完这篇文章的人大多学习了更多课程>>

176****9964 2017/05/09

厉害

回复
- 2017/04/05

回复
- 2017/04/05

回复
。。。。。。 2017/04/04

回复