baidumap 百度地图，实现多点之间的带方向路线图。
通过lastVisitAt判断时间先后。
通过三角函数验证角度
再由baidumap 会制线段
绘制三角箭头
比较难看……
测试个人
因为框架引用baidu 有各种问题失败，为最快实现，以此页作一个独立的iframe
通过window.localStorage 实现数据传递。
父页代码
window.localStorage.jsondata=JSON.stringify(json.data); var iframe=$("#iframebaidumap"); iframe.attr('src', '/baidumap.html');
window.localStorage.jsondata数据传递格式如下
"[{"lat":34.514075,"lng":113.439854,"name":"千一网吧","mobileNumber":"15838095119","contactName":"岳老板","phoneNumber":"","lastVisitAt":"2015-04-17T07:14:32.301Z"}]"
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
/*html{height:100%}*/
body{
/*height:100%;*/
margin:0px;padding:0px;
height:600px;width:600px;
}
#container{height:600px}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你懂得">
//v1.5版本的引用方式：src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
// 百度地图API功能
var jsondata= window.localStorage.jsondata;
if(jsondata){
var map = new BMap.Map("container");
// // 创建地图实例
jsondata=JSON.parse(jsondata);
var latcount=0;
var lngcount=0;
var points=[];
jsondata=jsondata.sort(function(x,y){
x.lastVisitAt> y.lastVisitAt
});
var datanew=[];
for ( var i=0, ien=jsondata.length ; i<ien ; i++ ) {
if(i>=1){
if(jsondata[i].lastVisitAt==jsondata[i-1].lastVisitAt){
}
else{
datanew.push(jsondata[i]);
}
}else{
datanew.push(jsondata[i]);
}
}
datanew=datanew.sort(function(x,y){
x.lastVisitAt> y.lastVisitAt
});
for(var i = 0,ien=datanew.length;i<ien;i++){
latcount+= datanew[i].lat;
lngcount+= datanew[i].lng;
var point1 =new BMap.Point( datanew[i].lng,datanew[i].lat);
points.push(point1);
var marker = new BMap.Marker(point1);
map.addOverlay(marker);
var label = new BMap.Label(i,{offset:new BMap.Size(5,-5)});
marker.setLabel(label);
if(i>=1){
var y=datanew[i].lat*1000-datanew[i-1].lat*1000;
var x=datanew[i].lng*1000-datanew[i-1].lng*1000;
var jia=0;
if(x!=0){
var tanvalue=y/x;
var jiajiao=Math.atan(tanvalue)*180;
jia=-(90-jiajiao);
}
else{
if(y<0){
jia=180;
}
}
var vectorFCArrow = new BMap.Marker(point1, {
// 初始化方向向上的闭合箭头
icon: new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW, {
scale: 1,
strokeWeight: 1,
rotation: jia,//顺时针旋转30度
fillColor: 'red',
fillOpacity: 0.8
})
});
map.addOverlay(vectorFCArrow);
}
}
var polyline = new BMap.Polyline(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
map.addOverlay(polyline); //增加折线
var centerpoint = new BMap.Point(lngcount/datanew.length, latcount/datanew.length);
map.centerAndZoom(centerpoint, 15);
map.enableScrollWheelZoom(true);
}
else{
var map = new BMap.Map("container");
var point = new BMap.Point(116.417854,39.921988);
map.centerAndZoom(point, 15);
var opts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(30, -30) //设置文本偏移量
}
var label = new BMap.Label("欢迎使用小云安全管理系统", opts); // 创建文本标注对象
label.setStyle({
color : "red",
fontSize : "12px",
height : "20px",
lineHeight : "20px",
fontFamily:"微软雅黑"
});
map.addOverlay(label);
map.enableScrollWheelZoom(true);
}
</script>
</body>
</html>