通过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>


												


											
baidumap 百度地图，实现多点之间的带方向路线图。的更多相关文章
	

    
								
  1. iOS开发---集成百度地图完善版
		
    一.成为百度的开发者.创建应用 http://developer.baidu.com/map/index.php?title=首页 (鼠标移向 然后选择你的项目需要的功能 你可以在里面了解到你想要使用 ...
    
		
    2. 
						
  2. ios添加百度地图方法
		
    Hello BaiduMapiOS SDK 引入头文件 引入静态库文件 引入系统framework 引入mapapi.bundle资源文件 初始化BMKMapManager 创建BMKMapView  ...
    
		
    3. 
						
  3. Android 打开高德地图、百度地图进行导航；打开第三方App去导航；
		
    抽成工具类了,复制下来就能直接用了,直接看代码吧: 高德地图Url Api: http://lbs.amap.com/api/amap-mobile/guide/android/navigation  ...
    
		
    4. 
						
  4. 百度地图常用2.0使用以及调用js
		
    /** * 生成一条路线 * @param {Object} baiduMap 百度地图的 map对象 * @param {Object} lineColor 线路颜色 * @param {Objec ...
    
		
    5. 
						
  5. Android自己定义百度地图缩放图标
		
    自己定义实现Android百度地图的缩放图标,须要自己定义一个缩放控件,实现效果例如以下: 这里的缩放效果,实现了点击button能够对地图的放大缩小,通过手势放大与缩小也控制缩放图标的可用状态.详细 ...
    
		
    6. 
						
  6. 百度地图API 添加自定义标注 多点标注
		
    原文:百度地图API 添加自定义标注 多点标注 分四个文件 location.php map.css 图片 数据库 数据库配置自己改下 -------------------------------- ...
    
		
    7. 
						
  7. 百度和谷歌的逆地址解析及GPS、谷歌地图和百度地图坐标之间的转换（python版）
		
    #!/usr/bin/env python # coding:utf-8 # @author: KaiVen """ GPS坐标转换: WGS-84:是国际标准,GPS坐 ...
    
		
    8. 
						
  8. 百度地图api文档实现任意两点之间的最短路线规划
		
    两个点之间的路线是使用“Marker”点连接起来的,目前还没找到改变点颜色的方法,测试过使用setStyle没有效果. <html><head> <meta http-e ...
    
		
    9. 
						
  9. 百度地图足迹demo（多点轨迹生成）
		
    不要忘记引用JQuery//~~~<script src="jquery-1.7.1.min.js" type="text/javascript"> ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. E - Two Arithmetic Progressions（CodeForces - 710D）（拓展中国剩余定理）
			
    You are given two arithmetic progressions: a1k + b1 and a2l + b2. Find the number of integers x such ...
    
			
    2. 
						
  2. java 中static关键字注意事项
			
    1.内存中存放的位置:(static修饰的方法和属性保存在方法区中,但是方法区也是堆的一部分) 内存的分区 2.什么样的属性可以定义为静态数据 例如: class person{ public Str ...
    
			
    3. 
						
  3. java实现图片和pdf添加铺满文字水印
			
    依赖jar包 <!-- pdf start --> <dependency> <groupId>com.itextpdf</groupId> <a ...
    
			
    4. 
						
  4. python妹子图爬虫5千张高清大图突破防盗链福利5千张福利高清大图
			
    meizitu-spider python通用爬虫-绕过防盗链爬取妹子图 这是一只小巧方便,强大的爬虫,由python编写 所需的库有 requests BeautifulSoup os lxml 伪 ...
    
			
    5. 
						
  5. zabbix3.4--配置微信告警
			
    1.注册企业微信 https://work.weixin.qq.com/ 2.注册好后登陆,点击“我的企业”,记录企业ID. 3.点击“应用管理”--“创建应用”,创建应用时添加接收告警的用户 4.添 ...
    
			
    6. 
						
  6. map的嵌套 + 例题(水果)
			
    水果 http://acm.hdu.edu.cn/showproblem.php?pid=1263 Problem Description 夏天来了~~好开心啊,呵呵,好多好多水果~~Joe经营着一个 ...
    
			
    7. 
						
  7. 吴裕雄--天生自然 JAVA开发学习：重写(Override)与重载(Overload)
			
    class Animal{ public void move(){ System.out.println("动物可以移动"); } } class Dog extends Anim ...
    
			
    8. 
						
  8. C#的静态方法和实例化方法的区别
			
    C#的静态方法和实例化方法的区别 在大多数时候,我们写一个方法,会把方法区分为实例化方法和静态方法.而当被问到静态方法和实例化方法的区别的时候,我在写这篇文章的前10分钟,或许我会回答:"静 ...
    
			
    9. 
						
  9. sqlserver 时间格式 取年月日时分
			
    select substring( convert(varchar,getdate(),120),1,16)
    
			
    10. 
						
  10. linkage disequilibrium|linkage equilibrium
			
    I.9 Linkage INDEPENDENCE OF GENOTYPES AT TWO LOCI:若A,B是两个独立位点:PA是基因A的概率,PB是基因B的概率.因为基因A与基因B是相互独立的位点, ...
    
			
    11.