通过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. ios添加百度地图方法

    Hello BaiduMapiOS SDK 引入头文件 引入静态库文件 引入系统framework 引入mapapi.bundle资源文件 初始化BMKMapManager 创建BMKMapView ...

  3. Android 打开高德地图、百度地图进行导航;打开第三方App去导航;

    抽成工具类了,复制下来就能直接用了,直接看代码吧: 高德地图Url Api: http://lbs.amap.com/api/amap-mobile/guide/android/navigation ...

  4. 百度地图常用2.0使用以及调用js

    /** * 生成一条路线 * @param {Object} baiduMap 百度地图的 map对象 * @param {Object} lineColor 线路颜色 * @param {Objec ...

  5. Android自己定义百度地图缩放图标

    自己定义实现Android百度地图的缩放图标,须要自己定义一个缩放控件,实现效果例如以下: 这里的缩放效果,实现了点击button能够对地图的放大缩小,通过手势放大与缩小也控制缩放图标的可用状态.详细 ...

  6. 百度地图API 添加自定义标注 多点标注

    原文:百度地图API 添加自定义标注 多点标注 分四个文件 location.php map.css 图片 数据库 数据库配置自己改下 -------------------------------- ...

  7. 百度和谷歌的逆地址解析及GPS、谷歌地图和百度地图坐标之间的转换(python版)

    #!/usr/bin/env python # coding:utf-8 # @author: KaiVen """ GPS坐标转换: WGS-84:是国际标准,GPS坐 ...

  8. 百度地图api文档实现任意两点之间的最短路线规划

    两个点之间的路线是使用“Marker”点连接起来的,目前还没找到改变点颜色的方法,测试过使用setStyle没有效果. <html><head> <meta http-e ...

  9. 百度地图足迹demo(多点轨迹生成)

    不要忘记引用JQuery//~~~<script src="jquery-1.7.1.min.js" type="text/javascript"> ...

随机推荐

  1. Linux-让程序不能多次运行

    1.因为守护进程是长时间运行而不退出的,因此./a.out执行一次就有一个进程,执行多次就有多个进程. 2.这样并不是我们想要的.我们的守护进程一般都是服务器,服务器程序只要运行一个就够了,多次同时运 ...

  2. CentOS7下MySQL8的二进制基本安装配置

    前言 基于本地Centos7.6虚拟机Mysql8的配置(亲测有效) 一.安装前的准备 1.到官网下载mysql-8.0.16-linux-glibc2.12-x86_64.tar.xz 2.通过Xs ...

  3. Unity使用TUIO协议接入雷达

    本篇文章不介绍Unity.TUIO.雷达是什么以及有什么作用.刚接触TUIO的亲们,建议直接硬刚.至于刚接触Unity的亲,这边建议亲直接放弃治疗呢 下面开始正儿八经的教程 需要准备的东西 Unity ...

  4. nginx_tcp_proxy代理酸酸乳

    一.安装低版本的nginx(高版本不支持tcp代理模块:nginx_tcp_proxy_module)Nginx默认只支持http反向代理,要支持tcp反向代理,需在编译时增加tcp代理模块[ngin ...

  5. 信号分析——从傅里叶变化到FFT

    我们眼中的世界就像皮影戏的大幕布,幕布的后面有无数的齿轮,大齿轮带动小齿轮,小齿轮再带动更小的. 在最外面的小齿轮上有一个小人——那就是我们自己. 我们只看到这个小人毫无规律的在幕布前表演,却无法预测 ...

  6. 17.3.12--uillib模块

    1---uillib是python标准库中最常用的一个python网络应用资源访问的模块,他可以让你像访问文本一样,读取网页的内容 它的作用是访问一些不需要验证的网络资源和cookie等 uillib ...

  7. HDU重现赛之2019CCPC-江西省赛

    本人蒟蒻,5个小时过了5道,看到好几个大佬AK,%%%%%%% http://acm.hdu.edu.cn/contests/contest_show.php?cid=868 先放大佬的题解(不是我写 ...

  8. 35)类和结构体类比---this

    那么,为啥  Test a(10)  , Test  b(20)   然后  我a.getI()  取到的是10,而不是20     就能将那个  10  给  a  对象的  m1    是因为有 ...

  9. 吴裕雄--天生自然 pythonTensorFlow图形数据处理:数据集基本使用方法

    import tempfile import tensorflow as tf # 1. 从数组创建数据集. input_data = [1, 2, 3, 5, 8] dataset = tf.dat ...

  10. 吴裕雄--天生自然 PYTHON3开发学习:字典

    dict = {'} dict1 = { 'abc': 456 } dict2 = { 'abc': 123, 98.6: 37 } dict = {'Name': 'Runoob', 'Age': ...