通过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. 18 11 07  pygame 继续使用
			
    ---恢复内容开始--- 1  给原来的游戏不定时  增加一些敌机  用到了pygame的定时器    定时器就是每隔一段时间  就进行一次相同的操作 2 pyagame 在捕获键盘操作有两种 1   ...
    
			
    2. 
						
  2. 加速软件源更新和安装 ubuntu 软件中心
			
    Linux mint 12 修改加速软件源更新和安装 ubuntu 软件中心 由于 linux mint 12 是基于 ubuntu 的,可以使用 ubuntu 的源(Ubuntu 11.10 代号  ...
    
			
    3. 
						
  3. 【论文笔记系列】AutoML：A Survey of State-of-the-art （下）
			
    [论文笔记系列]AutoML:A Survey of State-of-the-art (上) 上一篇文章介绍了Data preparation,Feature Engineering,Model S ...
    
			
    4. 
						
  4. dp--背包--开心的金明
			
    题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过N元钱就行”.今天 ...
    
			
    5. 
						
  5. python数据预处理for knn
			
    机器学习实战 一书中第20页数据预处理,从文本中解析数据的程序. import numpy as np def dataPreProcessing(fileName): with open(fileN ...
    
			
    6. 
						
  6. Java之线程通信的方法
			
    /** * 线程通信的例子:使用两个线程打印 1-100.线程1, 线程2 交替打印 * * 涉及到的三个方法: * wait():一旦执行此方法,当前线程就进入阻塞状态,并释放同步监视器. * no ...
    
			
    7. 
						
  7. python——logging模块
			
    简介: 日志是一种可以追踪某些软件运行时所发生事件的方法.软件开发人员可以向他们的代码中调用日志记录相关的方法来表明发生了某些事情.不同的事件,被区分在不同的等级中,故通过log分析,可以很轻易地分析 ...
    
			
    8. 
						
  8. PAT甲级——1140.Look-and-say Sequence (20分)
			
    Look-and-say sequence is a sequence of integers as the following: D, D1, D111, D113, D11231, D112213 ...
    
			
    9. 
						
  9. 【Java杂货铺】JVM#Class类结构
			
    代码编译的结果从本地机器码转为字节码,是储存格式发展的一小步,却是编程语言的一大步.--<深入理解Java虚拟机> 计算机只认识0和1.所以我们写的编程语言只有转义成二进制本地机器码才能让 ...
    
			
    10. 
						
  10. Gre封装
			
    在防火墙上连  云时,可以用g0/0/0 在防火墙上不连 云时,一定不用0/0/0 !!!!!!!!! 交换机什么都不配置. FW2: interface GigabitEthernet0/0/0 u ...
    
			
    11.