baidumap 百度地图，实现多点之间的带方向路线图。
通过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 百度地图，实现多点之间的带方向路线图。的更多相关文章
- iOS开发---集成百度地图完善版
一.成为百度的开发者.创建应用 http://developer.baidu.com/map/index.php?title=首页 (鼠标移向 然后选择你的项目需要的功能 你可以在里面了解到你想要使用 ...
- ios添加百度地图方法
Hello BaiduMapiOS SDK 引入头文件 引入静态库文件 引入系统framework 引入mapapi.bundle资源文件 初始化BMKMapManager 创建BMKMapView ...
- Android 打开高德地图、百度地图进行导航；打开第三方App去导航；
抽成工具类了,复制下来就能直接用了,直接看代码吧: 高德地图Url Api: http://lbs.amap.com/api/amap-mobile/guide/android/navigation ...
- 百度地图常用2.0使用以及调用js
/** * 生成一条路线 * @param {Object} baiduMap 百度地图的 map对象 * @param {Object} lineColor 线路颜色 * @param {Objec ...
- Android自己定义百度地图缩放图标
自己定义实现Android百度地图的缩放图标,须要自己定义一个缩放控件,实现效果例如以下: 这里的缩放效果,实现了点击button能够对地图的放大缩小,通过手势放大与缩小也控制缩放图标的可用状态.详细 ...
- 百度地图API 添加自定义标注 多点标注
原文:百度地图API 添加自定义标注 多点标注 分四个文件 location.php map.css 图片 数据库 数据库配置自己改下 -------------------------------- ...
- 百度和谷歌的逆地址解析及GPS、谷歌地图和百度地图坐标之间的转换（python版）
#!/usr/bin/env python # coding:utf-8 # @author: KaiVen """ GPS坐标转换: WGS-84:是国际标准,GPS坐 ...
- 百度地图api文档实现任意两点之间的最短路线规划
两个点之间的路线是使用“Marker”点连接起来的,目前还没找到改变点颜色的方法,测试过使用setStyle没有效果. <html><head> <meta http-e ...
- 百度地图足迹demo（多点轨迹生成）
不要忘记引用JQuery//~~~<script src="jquery-1.7.1.min.js" type="text/javascript"> ...
随机推荐
- [NOI2017]蚯蚓排队（链表+hash）
这题看题面感觉挺玄学的,但其实会挂链式hash就能暴力切了,就是纸老虎,考察选手的语文水平.不过三年没写挂链hash也应该写一下了…… 首先模数设成自然溢出ull,然后挂链时的模数取2^24.然后就可 ...
- Linux(CENTOS7) Tomcat服务成功发布但局域网浏览器无法访问
问题 : 我在linux搭建了一个tomcat服务器,tomcat开启后,发现在局域网浏览器上无法访问该tomcat,浏览器报无法访问服务器错误,我查看了tomcat的日志,路径..../tomcat ...
- Json返回结果为null属性不显示解决
import java.io.IOException; import org.springframework.boot.autoconfigure.condition.ConditionalOnMis ...
- dfs--八皇后问题
在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上. 你的任务是,对于给定的N,求出有多少种合法的放置方法. 因为我们 ...
- 第一个struts2框架
编写步骤: 1.导入有关的包. 2.编写web.xml文件 3.写Action类 4.编写jsp 5.编写struts.xml web.xml <?xml version="1.0&q ...
- pandas在指定列插入数据
import pandas as pd import numpy as np df = pd.DataFrame(np.arange(15).reshape(5, 3), columns=['a', ...
- java客房管理小项目，适合java小白练手的项目！
java客房管理小项目 这个客房管理小项目,适合java初学者练手.功能虽然不多,但是内容很齐全! 喜欢这样文章的可以关注我,我会持续更新,你们的关注是我更新的动力!需要更多java学习资料的也可以私 ...
- Python笔记_第二篇_面向过程_第二部分_5.第三方模块的使用和自定模块(以Pillow模块为例)
1. 安装第三方模块: 打开黑屏终端: cmd: pip -verson pip - V C:\windows\system32>pip -V pip from c:\python37\lib\ ...
- sbt 设置
修改 sbtopts for shell # zkk -sbt-dir D:/DATA/.sbt -sbt-boot D:/DATA/.sbt/boot -ivy D:/DATA/.ivy2 修改 s ...
- ruoyi StringUtils
package com.ruoyi.common.utils; import java.util.Collection; import java.util.Map; import com.ruoyi. ...