通过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. 插曲  强大的神器  vmware
			
    电脑到了  这连天给电脑配环境变量  真的想死  发现用 虚拟机 直接跑别人配置好的镜像文件   多快好省超级开心 比较毒瘤的  clion  不仅要配置c++ 环境  还要走cmake  等一堆东西 ...
    
			
    2. 
						
  2. Tomcat server.xml常用配置  含有外带文件及默认host
			
    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE server-xml [<!ENTITY ...
    
			
    3. 
						
  3. EXCEL快速实现下拉计算快捷键
			
    ctrl + shift + 方向键,,选择要填充的范围,,然后ctrl + d
    
			
    4. 
						
  4. Mybatis 使用分页查询亿级数据 性能问题 DB使用ORACLE
			
    一般用到了mybatis框架分页就不用自己写了 直接用RowBounds对象就可以实现,但这个性能确实很低 今天我用到10w级得数据分页查询,到后面几页就迭代了很慢 用于记录 1.10万级数据如下 [ ...
    
			
    5. 
						
  5. android studio 3.2 查看Deveice Monitor
			
    View菜单下面的 Tool Windows 下面的 Devecie File Explorer
    
			
    6. 
						
  6. Linux-waitpid介绍
			
    1.waitpid与wait差别 (1).基本功能是一样的,都是用来回收子进程 (2).waitpid可以回收指定PID的子进程 (3).waitpid可以阻塞式或非阻塞式两种工作模式 2.代码示例  ...
    
			
    7. 
						
  7. P1781 宇宙总统
			
    题目地址:https://www.luogu.com.cn/problem/P1781 题目描述:地球历公元 6036 年,全宇宙准备竞选一个最贤能的人当总统,共有 n 个非凡拔尖的人竞选总统,现在票 ...
    
			
    8. 
						
  8. python 多维数组 字典
			
    #多维数组list = [[87,57,98],[34,87,90]]print(list[1][0]) l = [[87,57,98],[34,87,[90,99,67]]]print(l[1][2 ...
    
			
    9. 
						
  9. LeetCode——71.简化路径
			
    以 Unix 风格给出一个文件的绝对路径,你需要简化它.或者换句话说,将其转换为规范路径. 在 Unix 风格的文件系统中,一个点(.)表示当前目录本身:此外,两个点 (..) 表示将目录切换到上一级 ...
    
			
    10. 
						
  10. Kafka及周边深度了解
			
    之前介绍了使用官方脚本自动化启动一个Fabric网络,并且所有的证书都是通过官方的命令行工具cryptogen直接生成网络中的所有节点的证书.在开发环境可以这么简单进行,但是生成环境下还是需要我们自定 ...
    
			
    11.