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>