调用百度地图api实现地图查询功能

最新推荐文章于 2024-05-14 15:38:39 发布

小姚师傅

最新推荐文章于 2024-05-14 15:38:39 发布

阅读量1.4k

点赞数 6

分类专栏： JAVA-数据结构

本文链接：https://blog.csdn.net/qq_34582693/article/details/93196310

版权

JAVA-数据结构专栏收录该内容

14 篇文章 0 订阅

订阅专栏

百度地图api功能强大，进入百度地图api平台之后首先需要注册申请一个ak码（其实就是权限码），通过审核之后就可以参考api提供的例子进行自定义的地图开发功能了。

在这里提供两个本人写好的地图查询功能，分别是【根据输入地址智能定位地图坐标】以及【自动补全起点/终点名称并自动生成公交线路】，代码不难，重在分享，后续有时间可能会继续增加地图插件并更新博客。

1·【根据输入地址智能定位地图坐标】

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
		#l-map{height:300px;width:100%;}
		#r-result{width:100%;}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=这里需要输入你申请的ak码"></script>
	<title></title>
</head>
<body>
	<div id="l-map"></div>
	<div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
	<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	function G(id) {
		return document.getElementById(id);
	}

	var map = new BMap.Map("l-map");
	map.centerAndZoom("北京",12);                   // 初始化地图,设置城市和地图级别。

	var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
		{"input" : "suggestId"
		,"location" : map
	});

	ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
	var str = "";
		var _value = e.fromitem.value;
		var value = "";
		if (e.fromitem.index > -1) {
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
		
		value = "";
		if (e.toitem.index > -1) {
			_value = e.toitem.value;
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
		G("searchResultPanel").innerHTML = str;
	});

	var myValue;
	ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
	var _value = e.item.value;
		myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
		
		setPlace();
	});

	function setPlace(){
		map.clearOverlays();    //清除地图上所有覆盖物
		function myFun(){
			var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
			map.centerAndZoom(pp, 18);
			map.addOverlay(new BMap.Marker(pp));    //添加标注
		}
		var local = new BMap.LocalSearch(map, { //智能搜索
		  onSearchComplete: myFun
		});
		local.search(myValue);
	}
</script>

2·【自动补全起点/终点名称并自动生成公交线路】

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
		#l-map{height:500px;width:100%;}
	</style>
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=这里需要输入你申请的ak码"></script>
	<title>根据起终点名称查询公交换乘</title>
</head>
<body>
	<div id="l-map"></div>
	<div id="r-result">
		起点:<input type="text" id="suggestId1" size="20" value="" style="width:150px;" />
	</div>
	<div id="searchResultPanel1" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
	<div id="r-result">
		终点:<input type="text" id="suggestId2" size="20" value="" style="width:150px;" />
	</div>
	<div id="searchResultPanel2" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
	<div id="driving_way">
		<select>
			<option value="0">最少时间</option>
			<option value="1">最少换乘</option>
			<option value="2">最少步行</option>
			<option value="3">不乘地铁</option>
		</select>
		<input type="button" id="result" value="查询"/>
	</div>
	<input type="hidden" id="qidian">
	<input type="hidden" id="zhongdian">
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("l-map");         
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);   // 初始化地图，设置中心点坐标和地图级别  
	map.enableScrollWheelZoom(true);				//开启鼠标滚轮缩放
	map.addControl(new BMap.NavigationControl());
	map.addControl(new BMap.ScaleControl());
	map.addControl(new BMap.OverviewMapControl());
	map.addControl(new BMap.MapTypeControl());

	var routePolicy = [BMAP_TRANSIT_POLICY_LEAST_TIME,BMAP_TRANSIT_POLICY_LEAST_TRANSFER,BMAP_TRANSIT_POLICY_LEAST_WALKING,BMAP_TRANSIT_POLICY_AVOID_SUBWAYS];
	var transit = new BMap.TransitRoute(map, {
			renderOptions: {map: map},
			policy: 0
		});
		
	//查询路线	
	$("#result").click(function(){
		if(G("qidian").value!=null&&G("zhongdian").value!=null){
			map.clearOverlays(); 
			var i=$("#driving_way select").val();
			var start = G("qidian").value;
			var end = G("zhongdian").value;
			search(start,end,routePolicy[i]); 
			function search(start,end,route){ 
				transit.setPolicy(route);
				transit.search(start,end);
			}
		}else{
			alert("请填写起点和终点");
			return;
		}	
	});
	
	function G(id) {
		return document.getElementById(id);
	}
	
	//起点终点智能被选地址下拉框
	var ac1 = new BMap.Autocomplete(    //建立一个自动完成的对象
		{"input" : "suggestId1"
		,"location" : map
	});

	ac1.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
	var str = "";
		var _value = e.fromitem.value;
		var value = "";
		if (e.fromitem.index > -1) {
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
		
		value = "";
		if (e.toitem.index > -1) {
			_value = e.toitem.value;
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
		G("searchResultPanel1").innerHTML = str;
	});

	var myValue;
	ac1.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
	var _value = e.item.value;
		myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		G("searchResultPanel1").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
		
		
		setPlace1();
	});


var ac2 = new BMap.Autocomplete(    //建立一个自动完成的对象
		{"input" : "suggestId2"
		,"location" : map
	});

	ac2.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
	var str = "";
		var _value = e.fromitem.value;
		var value = "";
		if (e.fromitem.index > -1) {
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
		
		value = "";
		if (e.toitem.index > -1) {
			_value = e.toitem.value;
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
		G("searchResultPanel2").innerHTML = str;
	});

	var myValue;
	ac2.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
	var _value = e.item.value;
		myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		G("searchResultPanel2").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
		
		setPlace2();
	});



	function setPlace1(){
		map.clearOverlays();    //清除地图上所有覆盖物
		function myFun(){
			var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
			map.centerAndZoom(pp, 18);
			map.addOverlay(new BMap.Marker(pp));    //添加标注
		}
		var local = new BMap.LocalSearch(map, { //智能搜索
		  onSearchComplete: myFun
		});
		local.search(myValue);
		G("qidian").value =myValue; 
	}
	
		function setPlace2(){
		map.clearOverlays();    //清除地图上所有覆盖物
		function myFun(){
			var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
			map.centerAndZoom(pp, 18);
			map.addOverlay(new BMap.Marker(pp));    //添加标注
		}
		var local = new BMap.LocalSearch(map, { //智能搜索
		  onSearchComplete: myFun
		});
		local.search(myValue);
		G("zhongdian").value =myValue; 
		
	}
</script>

如果有帮助，点个赞再走呗！感谢支持。

小姚师傅

关注

6
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
调用百度地图api实现地图查询功能

百度地图api功能强大，进入百度地图api平台之后首先需要注册申请一个ak码（其实就是权限码），通过审核之后就可以参考api提供的例子进行自定义的地图开发功能了。在这里提供两个本人写好的地图查询功能，分别是【根据输入地址智能定位地图坐标】以及【自动补全起点/终点名称并自动生成公交线路】，代码不难，重在分享，后续有时间可能会继续增加地图插件并更新博客。1·【根据输入地址智能定位地图坐标】...
复制链接

扫一扫