web使用百度地图实现经纬度定位和轨迹

1首先成为百度开发者(注意选择浏览器端和JavascriptAPI)

2.申请秘钥(如果不想对访问网址进行限制的话 Referer白名单使用 * )

3.定位的代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String name = (String)request.getAttribute("name");
	String longitude = (String)request.getAttribute("longitude");
	String latitude = (String)request.getAttribute("latitude");
	String time = (String)request.getAttribute("time");
%>
<!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" />
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
	<style type="text/css">
		body, html,#allmap {
			width: 100%;height: 100%;
			overflow: hidden;margin:0;
			font-family:"微软雅黑";
		}
	</style>
	<title>地图定位</title>
</head>

<body>
	<div id="allmap"></div>
	<div id="map-address0" style="display:none">
   		<p>姓名：<%=name %></p>
   		<p>时间：<%=time %></p>
	</div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(104.404, 37.915),11);  // 初始化地图,设置中心点坐标和地图级别
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));	             			
	map.setCurrentCity("西安");          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	map.setMapStyle({style:'grassgreen'});
	
	// 用经纬度设置地图中心点
	var longitude = <%=longitude%>;
	var latitude = <%=latitude%>;
	if( longitude!=null && latitude != null){
		map.clearOverlays(); 
		var new_point = new BMap.Point(longitude,latitude);
		var infoWindow = new BMap.InfoWindow(document.getElementById("map-address0").innerHTML);
		var marker = new BMap.Marker(new_point);  // 创建标注
		//点击标注显示信息
		marker.addEventListener("click", function(){          
		    this.openInfoWindow(infoWindow);
		});
		map.addOverlay(marker);              // 将标注添加到地图中
		map.panTo(new_point);      
	}
</script>

上面的html接收了经纬度,名字和时间,可以根据这个进行地图定位和设置点击事件(实现定位功能)

轨迹功能,接收到后端传来的一个经纬度的数据后

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="net.sf.json.JSONArray" %>
<%@ page import="net.sf.json.JSONObject" %>

<%
	JSONArray jsonArray = (JSONArray)request.getAttribute("ret");
%>
<!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" />
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
	<script type="text/javascript" src="/js/jquery-1.8.2.js"></script>
	<style type="text/css">
		body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#allmap {height:100%; width: 100%;}
		#control{width:100%;}
	</style>
	<title>行动轨迹</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
	map.enableScrollWheelZoom();
	map.setMapStyle({style:'grassgreen'});
	var json = <%=jsonArray%>;
	var points = [];
	for(var i=0,l=json.length;i<l;i++){
//		var object = json[i];
//		alert(json[i].longitude+json[i].latitude);
		var point = new BMap.Point(json[i].longitude, json[i].latitude);
//		alert(point.longitude+point.latitude);
		points[i]=point;
	}
	var polyline = new BMap.Polyline(points, {strokeColor:"red", strokeWeight:4, strokeOpacity:0.5});   //创建折线
	map.addOverlay(polyline);   //增加折线
</script>

web使用百度地图实现经纬度定位和轨迹

猜你喜欢