通过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. python 爬虫 多线程 多进程
			
    一.程序.进程和线程的理解  程序:就相当于一个应用(app),例如电脑上打开的一个程序. 进程:程序运行资源(内存资源)分配的最小单位,一个程序可以有多个进程. 线程:cpu最小的调度单位,必须依赖 ...
    
			
    2. 
						
  2. Windows下将Python源代码.py文件封装成exe可执行文件方法
			
    安装pyinstaller cmd中使用pip安装 pip install pyinstaller 同时会自动安装pywin32(pip真慢50M这里就走20KB),可以进行切换为国内源进行提速. 就 ...
    
			
    3. 
						
  3. UVA-10074 最大子矩阵 DP
			
    求出大矩阵里面全为0的最大子矩阵 我自己用的个挫DP写的,感觉写的不是很好,其实可以再优化,DP想法就是以 0 0 到当前 i j 为整体矩阵考虑,当前 i j就是从 i-1 j或者 i,j-1那里最 ...
    
			
    4. 
						
  4. java 中static关键字注意事项
			
    1.内存中存放的位置:(static修饰的方法和属性保存在方法区中,但是方法区也是堆的一部分) 内存的分区 2.什么样的属性可以定义为静态数据 例如: class person{ public Str ...
    
			
    5. 
						
  5. win32概述
			
    win32基于已有的框架 有意入口函数只有一个 都需要有一个主函数 所有程序的入口都是maincrtstartup tydedef 顾名思义 window是基于c,c++ 又想有自己所特有的数据类型  ...
    
			
    6. 
						
  6. 关于mysql一边查一边更新
			
    update test_table set user_id = 112 where id in (select id from ( select id from test_table where nu ...
    
			
    7. 
						
  7. Matlab高级教程_第二篇：Matlab相见恨晚的模块_01_定时器
			
    MATLAB的定时器功能(timer函数): 1 从MATLAB6.5版本开始,MATLAB开始支持定时器.相对于传统的pause函数来说,定时器要强大的多,不仅可以等效实现pause的功能,还可以显 ...
    
			
    8. 
						
  8. UG NX7.5 采用VS2008调试方法
			
    1.安装NX7.5(x64),这是废话 2.安装visual studio 2008,推荐安装2008,如果是2010应该也可以用,(没有测试,不清楚) 3.复制 UGS\NX 7.5\UGOPEN\ ...
    
			
    9. 
						
  9. windows下使用vs code调试简单的C程序
			
    常使用visual studio code(vs code)打开.c文件,如果让vs code具备调试技能估计会比较有用 准备工作: 1. vs code安装插件:cpptools 2. window ...
    
			
    10. 
						
  10. Apache Commons Lang之日期时间工具类
			
    码农不识Apache,码尽一生也枉然. FastDateFormat FastDateFormat是一个快速且线程安全的时间操作类,它完全可以替代SimpleDateFromat.因为是线程安全的,所 ...
    
			
    11.