百度地图轨迹回放，复制及用（兼容ie8）ie高版本 marker点击事件 e 的数据格式有点不同

最新推荐文章于 2022-07-06 13:18:58 发布
最新推荐文章于 2022-07-06 13:18:58 发布
阅读量374 收藏 1
点赞数
分类专栏： jq 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38935512/article/details/111252193
版权

在这里插入图片描述

<!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>
小墨宝
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
百度地图 轨迹回放_Android百度地图轨迹回放
weixin_42531588的博客
01-27 1095
点击上方“Android技术杂货铺”，选择“标星”干货文章，第一时间送达！目前需要做这样一个需求，后台返回一堆打点数据，要求Android端实现轨迹回放功能，带动画的那种，百度了很多，没有发现实际能用上的，于是自己做了一个，先上图，看是否是你需要的功能。思路很多个点，在地图上绘制，需要一个一个点来绘制，首先把那些点数据放在一个集合里面，这是总共完成绘制的线段，还有两点之间的动画，需要分割...
百度地图轨迹回放
10-24
这是一个百度地图的轨迹回放，小车会沿着轨迹运动。轨迹是由drivring通过始点和终点获取的一条线路。
百度地图 轨迹回放（一）
weixin_42448623的博客
09-09 1327
百度地图 轨迹回放（一） 百度地图 轨迹回放（二） 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,user...
百度地图 车辆轨迹 回放
09-15
百度地图 车辆轨迹 回放
利用百度地图API实现在地图车辆的平滑移动，轨迹回放，多台车辆同时平滑移动
07-12
本文将深入探讨如何利用百度地图API实现地图上的车辆平滑移动、轨迹回放以及多台车辆的同时平滑移动。我们将涵盖以下几个关键知识点： 1. **百度地图API**：百度地图API是百度公司提供的一套Web服务接口，允许...
android+eclipse开发百度地图的轨迹跟踪及轨迹的回放功能
05-02
在Android平台上，结合Eclipse开发环境，实现百度地图的轨迹跟踪和轨迹回放功能是一项常见的需求，这在物流、交通导航、运动健康等应用中尤为常见。本篇将详细讲解如何利用百度地图API来实现这一功能。 首先，我们...
百度地图轨迹回放demo
11-24
总的来说，“百度地图轨迹回放demo”是一个实用的教学实例，涵盖了Android应用开发中的地图API使用、数据结构管理、UI设计和动画技术等多个方面，对于学习如何在Android平台上构建地图应用的开发者来说，具有很高的...
百度地图api 轨迹回放
05-22
在本文中，我们将深入探讨如何使用百度地图API实现轨迹回放功能。百度地图API是一个强大的工具，它允许开发者集成地图功能到网页应用中，包括显示地图、定位、路径规划等。在JavaScript环境下，我们可以利用其...
百度地图：行走轨迹，轨迹回放
09-27
本项目主要聚焦于百度地图API的使用，特别是针对“行走轨迹”和“轨迹回放”这两个关键功能的实现。 首先，我们要了解的是“百度地图SDK”。SDK，全称为Software Development Kit，是一系列开发工具的集合，它为...
Android百度地图轨迹回放
08-09
点击播放按钮可以进行轨迹回放，下方有ProgressBar同步显示进度。可以进行暂停操作。下载后去AndroidMainfest里面把value改成自己在百度地图开发者平台申请的key，不过不改也不会影响绘制，只是地图显示的是方格。
百度 地图 历史轨迹回放
03-10
试用 timer类 实现 百度地图的历史轨迹回放
基于百度地图实现的轨迹回放
08-14
基于百度地图实现的轨迹回放！基于百度地图实现的轨迹回放！
百度地图API实现轨迹回放
09-23
使用百度地图API实现轨迹回放
百度地图轨迹 jquery 兼容ie低版本
12-18
百度地图轨迹
百度地图的轨迹回放和实时监控
Lemontree_fu的博客
11-12 4119
最近写了两个页面，是跟百度地图有关的，本来以为是用的鹰眼的轨迹，才发现没那么麻烦，直接用的是百度地图自带的api。 1 轨迹回放 <template> <div class="map"> <!--面包屑--> <span class="content_span"> <el-breadcrumb sepa...
百度地图 轨迹回放 android,【移动端】百度地图之历史轨迹回放
weixin_32541663的博客
05-25 701
官方demo本身是有历史轨迹例子的，运行起来也是非常666的，但在此基础上扩展功能是非常操蛋的。在此还耽误了整整两天的时间。后来不得不翻阅文档，重新去找解决的方式。对新方法，经过几次测试，最后功能终于出来了。本来想抽离出来写个demo，可是嵌套的东西很多，UI界面也经历的三次整改，故而此文屏蔽了很多功能和细节。第二就是，配合前端开发pc端离线地图，时间也不多。故而先在这讲一下实现思路，在后续的文章...
使用百度地图实现车辆轨迹回放
格物穷理
11-02 8348
最近在做的项目有个车辆轨迹回放需求，查资料看到可以使用百度地图的路书功能实现,百度路书功能如下。 点击开始按钮，小车会在地图上移动还原历史轨迹。 具体需求就是通过调用后台接口获取到指定车辆的指定时间段的位置信息，将位置信息还原到地图上，点击开始按钮，小车开始在地图上移动，同时添加开始、暂停、停止，地图缩放和速度调整功能。功能按键悬浮在地图左上角。 添加申请到的应用秘钥和路书js文件 <script src="http://api.map.baidu.com/api?v=2.0&amp.
百度地图显示车辆运行轨迹（静态）
zgphacker2010的专栏
07-06 1427
jspopular | 百度地图API SDK2、实现效果图如下：首先说明一下，这个功能主要是完成后台在地图上图层显示车辆的运行轨迹（线），一般车辆的轨迹可能通过app采集 或 车载终端上传到服务器。
百度地图getOverlays 获取Marker，触发Marker点击事件
最新发布
06-09
在百度地图SDK中，getOverlays() 方法同样是用于获取地图上所有 Overlay 的方法，而 Marker 也是一种 Overlay 类型，可以在地图上添加标记并响应点击事件。如果您想要在 Marker 被点击时触发某个事件，可以通过为 Marker 设置 OnMarkerClickListener 来实现。例如： ```java //获取地图上所有Overlay List<Overlay> overlays = baiduMap.getMapOverlays(); for (Overlay overlay : overlays) { //判断Overlay是否是Marker类型 if (overlay instanceof Marker) { final Marker marker = (Marker) overlay; //为Marker设置点击事件 marker.setOnMarkerClickListener(new OnMarkerClickListener() { @Override public boolean onMarkerClick(Marker marker) { //在这里处理Marker的点击事件 return false; } }); } } ``` 在这个示例中，我们首先通过 getMapOverlays() 方法获取地图上所有 Overlay，然后遍历这些 Overlay，判断是否是 Marker 类型，如果是就为该 Marker 设置点击事件。在点击事件的回调方法中，您可以编写自己的逻辑以响应 Marker 的点击事件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值