<!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" />
<!-- <script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script> -->
<script src = "http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<title>Track</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#controller{
border-bottom:1px outset;
height:30px;
filter:alpha(Opacity=100);
-moz-opacity:1; opacity:1;
z-index:10000;
background-color:lightblue;
position: relative;
left: 0;
right: 0;
top:0
}
#container{height:100%}
.boxChoose{
margin-left:30px;
width:1000px;
position: relative;
}
.selectPeopleBox{
position: absolute;
left:310px;
top: 25px;
background: #fff;
z-index: 1000;
width: 145px;
border:1px solid #666;
text-align: left;
max-height:150px;
overflow-y: auto;
}
ul,li{
margin:0;padding:0;list-style: none;
}
.selectPeopleBox li{
cursor: pointer;
padding-left:10px;
}
.selectPeopleBox li:hover{
background: #eee;
}
.choosePeople{
width:140px
}
.curPeopleText{
display: inline-block;
width:155px;
text-align: left;
}
.allPeople{
position: absolute;
left: 30px;
top: 1px;
}
</style>
</head>
<body onload="init();">
<div id="controller" align="center">
<!-- 选择人员 时间 -->
<div class="boxChoose">
<span>日期:</span>
<input class="date" type="date" value="2020-09-24"/>
<span>人员:</span>
<input class="choosePeople" type="text" />
<button class="searchBtn">搜索</button>
<button class="sureBtn">确定</button>
<input id="follow" type="checkbox"><span style="font-size:12px;" >画面跟随</span></input>
<input id="play" type="button" value="播放" onclick="player();" disabled />
<input id="pause" type="button" value="暂停" onclick="pause();" disabled />
<input id="reset" type="button" value="重置" onclick="reset()" disabled />
<span class="curPeopleText"></span>
<ul class="selectPeopleBox" hidden></ul>
</div>
<button class="allPeople">全部人员位置</button>
</div>
<div id="container"></div>
</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript">
// var points = [
// new BMap.Point(114.00100, 22.550000), new BMap.Point(114.00130, 22.550000),
// new BMap.Point(114.00160, 22.550000), new BMap.Point(114.00200, 22.550000),
// new BMap.Point(114.00300, 22.550500), new BMap.Point(114.00400, 22.550000),
// new BMap.Point(114.00500, 22.550000), new BMap.Point(114.00505, 22.549800),
// new BMap.Point(114.00510, 22.550000), new BMap.Point(114.00515, 22.550000),
// new BMap.Point(114.00525, 22.550400), new BMap.Point(114.00537, 22.549500)
// ];
//当前人得历史轨迹
var points=[];
var data=[]; //地图人员数据
var info={}; //个人详情
var map; //百度地图对象
var car; //汽车图标
var label; //信息标签
var centerPoint;
var timer; //定时器
var index = 0; //记录播放到第几个point
var followChk, playBtn, pauseBtn, resetBtn; //几个控制按钮
var curItem={} //当前选中人员得数据
var curDate=getDate() //当前时间
var htmlStr=""
$(".date").val(curDate)
function init() {
followChk = document.getElementById("follow");
playBtn = document.getElementById("play");
pauseBtn = document.getElementById("pause");
resetBtn = document.getElementById("reset");
//初始化地图
map = new BMap.Map("container");
// 将标注添加到地图中
map.centerAndZoom(new BMap.Point(114.00100, 22.550000), 15);
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl({isOpen: true}));
// 初始化数据
data=[
{lat:"22.550000",lng:"114.03000",custName:"杨杰",transactor:1},
{lat:"22.550000",lng:"114.00300",custName:"杨老大",transactor:2},
{lat:"22.550500",lng:"114.01300",custName:"骏驰",transactor:3},
{lat:"22.550400",lng:"114.00500",custName:"浩杰",transactor:4},
{lat:"22.550000",lng:"114.01100",custName:"king",transactor:5},
{lat:"22.550400",lng:"114.00100",custName:"狗多",transactor:6},
{lat:"22.550000",lng:"114.00800",custName:"结石",transactor:7},
{lat:"22.550400",lng:"114.00900",custName:"狗飞",transactor:8},
{lat:"22.549800",lng:"114.01000",custName:"狗狗多",transactor:9},
]
// 添加标准
for(var i=0;i<data.length-1;i++){
var item = data[i]
htmlStr=htmlStr+"<li class='selectPeople' data-id="+data[i].transactor+">"+data[i].custName+"</li>"
var header = new BMap.Icon ("./authorBaidu.png", new BMap.Size (35, 50), {
// 指定定位位置。
// 当标注显示在地图上时,其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
// anchor: new BMap.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时,您
// 需要指定大图的偏移位置,此做法与css sprites技术类似。
// imageOffset: new BMap.Size(0, 0 - 2) // 设置图片偏移
});
label = new BMap.Label(item.custName, {offset: new BMap.Size(-5, 30)});
label.setStyle({ // 设置label的样式
color: '#000',
border: '1px solid #999',
width:"40px",
textAlign:"center"
})
var marker = new BMap.Marker(new BMap.Point(item.lng, item.lat), {
icon: header
});
marker.setLabel(label);
map.addOverlay(marker);
marker.addEventListener('click', function (e) {
console.log(e,e.target.siblingElement.innerText,data[i]);
for(var n=0;n<data.length-1;n++){
if(e.target.siblingElement.innerText==data[n].custName){
$(".choosePeople").val(data[n].custName);
curItem=data[n];
sureSearch();
break
}
}
});
}
// 插入html
$(".selectPeopleBox").append(htmlStr)
// 选择人员事件
$(".choosePeople").on("focus",function(){
$(".selectPeopleBox").show()
})
var isSearch=false
$(".searchBtn").on("click",function(){
isSearch=true;
var str=$(".choosePeople").val();
htmlStr=""
for(var i=0;i<data.length-1;i++){
if(data[i].custName.indexOf(str)!=-1){
htmlStr=htmlStr+"<li class='selectPeople' data-id="+data[i].transactor+">"+data[i].custName+"</li>"
}
}
if(htmlStr==''){
htmlStr="<li class='selectPeople'>找不到人员</li>"
}
// 删除元素
$("li").remove(".selectPeople");
$(".selectPeopleBox").append(htmlStr)
// 选这人员点击事件
$(".selectPeopleBox li").on("click",function(){
if(this.innerHTML=='找不到人员'){
$(".selectPeopleBox").hide();
return false;
}
for(var i=0;i<data.length-1;i++){
if(data[i].transactor==$(this).attr("data-id")){
curItem=data[i]
}
}
$(".choosePeople").val(this.innerHTML)
$(".selectPeopleBox").hide()
})
$(".selectPeopleBox").show()
})
// 人员失去焦点事件
$(".choosePeople").on("blur",function(){
setTimeout(function(){
if(!isSearch){
$(".selectPeopleBox").hide()
}else{
isSearch=false
}
},300)
})
// 选这人员点击事件
$(".selectPeopleBox li").on("click",function(){
if(this.innerHTML=='找不到人员'){
$(".selectPeopleBox").hide();
return false;
}
for(var i=0;i<data.length-1;i++){
if(data[i].transactor==$(this).attr("data-id")){
curItem=data[i]
}
}
$(".choosePeople").val(this.innerHTML)
$(".selectPeopleBox").hide()
})
// 搜索轨迹
$(".sureBtn").on("click",sureSearch)
// 全部人员位置
$(".allPeople").on("click",function(){
map.clearOverlays();
// 添加标准
for(var i=0;i<data.length-1;i++){
var item = data[i]
htmlStr=htmlStr+"<li class='selectPeople' data-id="+data[i].transactor+">"+data[i].custName+"</li>"
var header = new BMap.Icon ("./authorBaidu.png", new BMap.Size (35, 50), {
// 指定定位位置。
// 当标注显示在地图上时,其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
// anchor: new BMap.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时,您
// 需要指定大图的偏移位置,此做法与css sprites技术类似。
// imageOffset: new BMap.Size(0, 0 - 2) // 设置图片偏移
});
label = new BMap.Label(item.custName, {offset: new BMap.Size(-5, 30)});
label.setStyle({ // 设置label的样式
color: '#000',
border: '1px solid #999',
width:"40px",
textAlign:"center"
})
var marker = new BMap.Marker(new BMap.Point(item.lng, item.lat), {
icon: header
});
marker.setLabel(label);
map.addOverlay(marker);
marker.addEventListener('click', function (e) {
console.log(e,e.target.siblingElement.innerText,data[i]);
for(var n=0;n<data.length-1;n++){
if(e.target.siblingElement.innerText==data[n].custName){
$(".choosePeople").val(data[n].custName);
curItem=data[n];
sureSearch();
break
}
}
});
}
})
function sureSearch(){
if($(".choosePeople").val()==''){
alert("选择人员!")
return false;
}
// 没有点击下拉框中得数据
if(curItem.custName!=$(".choosePeople").val()){
for(var i=0;i<data.length-1;i++){
if(data[i].custName==$(".choosePeople").val()){
curItem=data[i]
}
}
}
if(!curItem.custName){
alert("无此人员!")
return false;
}
console.log(parseInt(10*Math.random()));
// 清空覆盖物
map.clearOverlays();
var nn=parseInt(10*Math.random())
var arr=[
{lng:"114.00100",lat:"22.550000"},
{lng:"114.00130",lat:" 22.550000"},
{lng:"114.00160",lat:" 22.550000"},
{lng:"114.00200",lat:" 22.550000"},
{lng:"114.00300",lat:" 22.550500"},
{lng:"114.00400",lat:" 22.550000"},
{lng:"114.00500",lat:" 22.550000"},
{lng:"114.00505",lat:" 22.549800"},
{lng:"114.00510",lat:" 22.550000"},
{lng:"114.00515",lat:" 22.550000"},
{lng:"114.00525",lat:" 22.550400"},
{lng:"114.00537",lat:" 22.549500"},
]
// ajax得到数据
info={
custName:$(".choosePeople").val(),
list:arr.slice(0,5)
}
console.log(info.list);
$(".curPeopleText").text("当前人员:"+curItem.custName);
points=[];
for(var i=0;i<=info.list.length-1;i++){
points.push(new BMap.Point(info.list[i].lng, info.list[i].lat));
}
//通过DrivingRoute获取一条路线的point
var driving = new BMap.DrivingRoute(map);
driving.search(new BMap.Point(info.list[0].lng, info.list[0].lat), new BMap.Point(info.list[info.list.length-1].lng, info.list[info.list.length-1].lat));
driving.setSearchCompleteCallback(function() {
//得到路线上的所有point
points = driving.getResults().getPlan(0).getRoute(0).getPath();
//画面移动到起点和终点的中间
centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2);
map.panTo(centerPoint);
//连接所有点
map.addOverlay(new BMap.Polyline(points, {strokeColor: "blue", strokeWeight: 5, strokeOpacity: 1}));
//显示小车子 //创建头像
label = new BMap.Label(info.custName, {offset: new BMap.Size(-5, 30)});
label.setStyle({ // 设置label的样式
color: '#000',
border: '1px solid #999',
width:"40px",
textAlign:"center"
})
var header = new BMap.Icon ("./authorBaidu.png", new BMap.Size (35, 50), {
// 指定定位位置。
// 当标注显示在地图上时,其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
// anchor: new BMap.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时,您
// 需要指定大图的偏移位置,此做法与css sprites技术类似。
// imageOffset: new BMap.Size(0, 0 - 2) // 设置图片偏移
});
car = new BMap.Marker(points[0],{icon: header});
car.setLabel(label);
map.addOverlay(car);
//点亮操作按钮
playBtn.disabled = false;
resetBtn.disabled = false;
});
}
}
function player(){
index=0;
play()
}
function play() {
playBtn.disabled = true;
pauseBtn.disabled = false;
var point = points[index];
if(index > 0) {
map.addOverlay(new BMap.Polyline([points[index - 1], point], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1}));
}
// label.setContent("经度: " + point.lng + "<br>纬度: " + point.lat);
car.setPosition(point);
index++;
if(followChk.checked) {
map.panTo(point);
}
if(index < points.length) {
timer = window.setTimeout("play(" + index + ")", 30);
} else {
playBtn.disabled = true;
pauseBtn.disabled = true;
map.panTo(point);
}
}
function pause() {
playBtn.disabled = false;
pauseBtn.disabled = true;
if(timer) {
window.clearTimeout(timer);
}
}
function reset() {
followChk.checked = false;
playBtn.disabled = false;
pauseBtn.disabled = true;
if(timer) {
window.clearTimeout(timer);
}
index = 0;
car.setPosition(points[0]);
map.panTo(centerPoint);
}
function getDate(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
if (month < 10) {
month = "0" + month;
}
if (day < 10) {
day = "0" + day;
}
return year + "-" + month + "-" + day
}
</script>
</html>
百度地图轨迹回放,复制及用(兼容ie8)ie高版本 marker点击事件 e 的数据格式有点不同
最新推荐文章于 2022-07-06 13:18:58 发布