通过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说文解字_计数器
			
    from collections import Counter response = [ "vanilla", "chocolate", "vanil ...
    
			
    2. 
						
  2. 题解 P1630 【求和】
			
    题目 发现题解都不够优雅,就自己来一篇 ( 以下除[代码]处代码,其余均为现场手打,如有误请与本蒟蒻联系 ) [分析] 首先,看清楚了,题目是 \(\sum_{i=1}^ai^b\) 的余数 ,而不是 ...
    
			
    3. 
						
  3. git submodule update --init 和 --remote的区别
			
    git 的submodule 工具方便第三方库的管理,比如gitlab 上的各种开源工具,spdlog等 在项目目录下创建.gitmodule 里可以添加第三方库,然后在更新第三方库时,有两个选项 g ...
    
			
    4. 
						
  4. ae基础二
			
    纯色文本操作快捷键:选中图层点击快捷键(变换)锚点:a(调节中心点)位置:p(左右移动)(利用位置k帧做动画)缩放:s(水平翻转垂直翻转)旋转:r(围绕中心点(锚点)进行旋转)不透明度:tu选中索引  ...
    
			
    5. 
						
  5. 解决DIV超出样式长度自动换行
			
    width: 100px;display:block;word-break: break-all;word-wrap: break-word;
    
			
    6. 
						
  6. 七、Shell脚本高级编程实战第七部
			
    一.写网络服务的系统启动脚本 利用case语句开发类似系统启动rsync服务的脚本 代码: #!/bin/sah. /etc/init.d/functionspidfile="/var/ru ...
    
			
    7. 
						
  7. 吴裕雄--天生自然 pythonTensorFlow图形数据处理：windows操作系统删除tensorflow
			
    输入:pip uninstall tensorflow Proceed(y/n):y
    
			
    8. 
						
  8. Qt QString 和 LPCWSTR 的相互转换
			
    在windosw 编程中,常用到LPCWSTR 变量,QT中最常用到QString,下面提供QString和LPCWSTR 相互转换的方法 LPWSTR 转换成QString LPCWSTR str; ...
    
			
    9. 
						
  9. $.post系统登录校验
			
    AJAX方式:$.post系统登录校验 https://blog.csdn.net/woshisangsang/article/details/66560238?utm_source=blogxgwz ...
    
			
    10. 
						
  10. vitual box 虚拟机调整磁盘大小 resize partiton of vitual os
			
    key:vitual box, 虚拟机,调整分区大小 引用:http://derekmolloy.ie/resize-a-virtualbox-disk#prettyPhoto 1. 关闭虚拟机,找到 ...
    
			
    11.