前端（1）js：百度地图api使用

（1）百度地图API链接

1）获取key

http://lbsyun.baidu.com/apiconsole/key

2）查看相关API文档

http://lbsyun.baidu.com/index.php?title=jspopular3.0

 

 

（2）html中

 

<!-- 百度地图API -->
	<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:"微软雅黑";background:#f1f2f7;}
		#allmap{width:80%;height:800px;margin-left:10%;margin-right:10%;}
		p{margin-left:5px; font-size:14px;}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=OVaVcDjEz1Np7xTiWDheKXGx3BR0o0uV"></script><!-- knY7XGqYxexbiE9jeSo2EASvoT5jfMcV -->
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<!-- 百度地图API end-->

<!-- 百度地图API -->
	 <script type="text/javascript">
	// 百度地图API功能	
	// 百度地图API功能	
	map = new BMap.Map("allmap");
	var mPoint1 = new BMap.Point(102.808634, 27.707322);
//	var mPoint2 = new BMap.Point(117.112003, 40.172619);
//	var mPoint3 = new BMap.Point(117.131544, 40.331988);
	
	map.enableScrollWheelZoom();
	map.centerAndZoom(mPoint1,10);
	
	var data_info;
	
	
	/* var data_info = [
		[116.391474,39.920444,"地址：北京市东城区东华门街道故宫博物院"],
		[117.112003,40.172619,"地址：北京市平谷区王辛庄镇后罗庄北路"],
		[117.131544,40.331988,"地址：北京市平谷区镇罗营镇平程路平谷桃花海"]
					]; */
	
	//新增 地图区域覆盖
	
	/* var circle = new BMap.Circle(mPoint1,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
    map.addOverlay(circle);
    var local =  new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});  
    var myKeys1 = ["南昌饭店"];
    local.searchNearby(myKeys1,mPoint1,1000);
    
    var circle2 = new BMap.Circle(mPoint2,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
    map.addOverlay(circle2);
    var local2 =  new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});  
    var myKeys2 = ["酒店", "加油站",'餐馆'];
    local2.searchNearby(myKeys2,mPoint2,1000);
    
    var circle3 = new BMap.Circle(mPoint3,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
    map.addOverlay(circle3);
    var local3 =  new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});  
    var myKeys3 = ["酒店", "加油站",'餐馆'];
    local3.searchNearby(myKeys3,mPoint3,1000); */
	
	
	//地图区域覆盖--end
	
	var opts = {
				width : 250,     // 信息窗口宽度
				height: 80,     // 信息窗口高度
				title : "信息窗口" , // 信息窗口标题
				enableMessage:true//设置允许信息窗发送短息
			   };
	function showList(){
		data_info = [
			
			<%
			//String level = (String) session.getAttribute("Level");
			String Action = request.getParameter("Action");
			
			ArrayList<CurrentLocationBean> list = new Current_location().getLocation(null, level, Action);
			for (CurrentLocationBean bean : list) {
			%>
				[<%=bean.getLongitude()%>,<%=bean.getLatitude()%>,"<%=bean.getLocation()%>","<%=bean.getName()%>"],
			<%
				
			}
			
			%>
			];
		for(var i=0;i<data_info.length;i++){
			var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));  // 创建标注
			var content = data_info[i][2];
			map.addOverlay(marker);               // 将标注添加到地图中
			addClickHandler(content,marker);
		}
		console.log("now"+data_info);
	}
    
    
	function addClickHandler(content,marker){
		marker.addEventListener("click",function(e){
				openInfo(content,e)});
	}
	function openInfo(content,e){
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	}
	
	//定时执行
	ref = setInterval(function(){
		showList();
	},1000 * 3);
	
</script>