`

百度地图显示人员运行轨迹

 
阅读更多

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>人员运行轨迹</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wIt2mDCMGWRIi2pioR8GZnfrhSKQHzLY"></script>
    <style>
        * {margin: 0;padding: 0;}
        html, body, #container {width: 100%;height: 100%;overflow: hidden;}
        #pickerBox {position: absolute;z-index: 9999;top: 10px;left: 10px;width: 30%;height: 30px;box-shadow: 0 8px 6px #ddd;border-radius: 4px 0 0 4px;}
        #pickerInput {width: 100%;border: 1px solid #ccc;-webkit-appearance: none;outline: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);height: 100%;display: block;text-indent: 8px;box-sizing: border-box;font-size: 12px;border-radius: 4px 0 0 4px;}
        #poiInfo {background: #fff;}
        .amap_lib_placeSearch .poibox.highlight {background-color: #CAE1FF;}
        .amap_lib_placeSearch .poi-more {display: none !important;}
        .noclick {pointer-events: none;}
        .amap-logo {display: none;opacity: 0 !important;}
        .amap-copyright {opacity: 0;}
        .input-card {min-width: 0;word-wrap: break-word;background-clip: border-box;width: 240px;border-width: 0;border-radius: 0.4rem;box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .5);position: fixed;top: 55%;left: 50%;margin-left: -120px;flex: 1 1 auto;padding: 0.75rem 1.25rem;background-color: rgba(0, 0, 0, 0.5);color: #fff;font-size: 12px;text-align: justify;}
        .amap-touch-toolbar .amap-zoomcontrol {bottom: -50px;}
        .no-yes-btn {bottom: 10px;width: 60px;height: 32px;line-height: 32px;border-radius: 4px;position: fixed;display: block;text-align: center;background-color: rgba(0, 0, 0, 0.5);color: #fff;text-decoration: none;}
        .no-btn {left: 10px;}
        .yes-btn {right: 10px;background-color: #51c276;}
        .amap-ui-poi-picker-sugg-list .sugg-item {font-size: 12px !important;}
        .searChMap {display: block;background-color: #39a4ff;width: 60px;height: 30px;font-size: 12px;line-height: 30px;color: #fff;text-align: center;top: 0;position: absolute;right: -60px;border-radius: 0 4px 4px 0;text-decoration: none;}
        .success{display: block;background-color: #39a4ff;width: 60px;height: 30px;font-size: 12px;line-height: 30px;color: #fff;text-align: center;top: 0;position: absolute;right: -129px;border-radius: 4px 4px 4px 4px;text-decoration: none;}
    </style>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript">
        var map = new BMap.Map("container", {
            resizeEnable : true,
            zoom : 15
        });
        map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
        map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
        var PointArr = [
            {lat:34.19871225125219,lng:108.85087683972246,address:'陕西省西安市雁塔区丈八沟街道满堂悦MOMA'},
            {lat:34.20293030485046,lng:108.85945810890092,address:'陕西省西安市雁塔区丈八沟街道袁旗寨新村'},
            {lat:34.196431472916714,lng:108.87652904231766,address:'陕西省西安市雁塔区丈八沟街道嘉昱大厦'}];
        map.centerAndZoom(PointArr, 15);// 根据经纬度显示地图的范围
        map.setViewport(PointArr);// 根据提供的地理区域或坐标设置地图视野

        addStartMarker(new BMap.Point(PointArr[0].lng, PointArr[0].lat),'起点',map,PointArr[0].address);
        var carMk;//先将终点坐标展示的mark对象定义
        //运行图标
        var drivingPoint = new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26), {
            anchor : new BMap.Size(27, 13),
            imageSize:new BMap.Size(52,26)
        });
        //终点图标
        var terminalPoint = new BMap.Icon('endMap.png', new BMap.Size(45,45), {
            anchor : new BMap.Size(20, 45),
            imageSize:new BMap.Size(45,45)
        });
        var i = 0;
        var interval = setInterval(function () {
            if (i >= PointArr.length) {
                clearInterval(interval);
                return;
            }
            drowLine(map,PointArr[i],PointArr[i+1],i+2);//画线调用
            i = i + 1;
        }, 500);

        // 划线
        function drowLine(map,PointArr,PointArrNext,pointNum,address) {
            if(PointArrNext!=undefined) {
                var polyline = new BMap.Polyline(
                    [
                        new BMap.Point(PointArr.lng, PointArr.lat),
                        new BMap.Point(PointArrNext.lng, PointArrNext.lat)
                    ],
                    {
                        strokeColor: "red",
                        strokeWeight: 1,
                        strokeOpacity: 1
                    });   //创建折线
                map.addOverlay(polyline);
                addMarkerEnd(new BMap.Point(PointArrNext.lng, PointArrNext.lat), '运行', map, PointArrNext, new BMap.Point(PointArr.lng, PointArr.lat),pointNum,PointArrNext.address);//添加图标
            }else {
                addMarkerEnd(new BMap.Point(PointArr.lng, PointArr.lat), '终点', map,pointNum,PointArrNext.address);//添加终点图标
            }
        }
        //添加起始图标
        function addStartMarker(point, name,mapInit,address) {
            if(name=="起点"){
                var myIcon = new BMap.Icon("startMap.png", new BMap.Size(45,45),{
                    anchor: new BMap.Size(20, 45),//这句表示图片相对于所加的点的位置mapStart
                    imageSize:new BMap.Size(45, 45)//图标所用的图片的大小，此功能的作用等同于CSS中的background-size属性。可用于实现高清屏的高清效果
                    // offset: new BMap.Size(-10, 45), // 指定定位位置
                    // imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
                });
                //window.marker = new BMap.Marker(point,{icon:myIcon});//创建标注
                window.marker = new BMap.Marker(point,{});
                window.marker.setLabel(getNumberLabel(1));
                window.marker.addEventListener("click",function(e){
                    openInfo(address,point);
                });
                mapInit.addOverlay(marker);// 将标注添加到地图中
                //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            }
        }
        function getNumberLabel(number) {
            var offsetSize = new BMap.Size(0, 0);
            var labelStyle = {
                color: "#fff",
                backgroundColor: "0.05",
                border: "0"
            };
 
            //不同数字长度需要设置不同的样式。
            switch((number + '').length) {
                case 1:
                    labelStyle.fontSize = "14px";
                    offsetSize = new BMap.Size(4, 2);
                    break;
                case 2:
                    labelStyle.fontSize = "12px";
                    offsetSize = new BMap.Size(2, 4);
                    break;
                case 3:
                    labelStyle.fontSize = "10px";
                    offsetSize = new BMap.Size(-2, 4);
                    break;
                default:
                    break;
            }
 
            var label = new BMap.Label(number, {
                offset: offsetSize
            });
            label.setStyle(labelStyle);
            return label;
        }
        //添加行驶和终点图标
        function addMarkerEnd(point, name,mapInit,trackUnit,prePoint,pointNum,address) {
            if(name=="运行"){
                if(carMk){//先判断第一次进来的时候这个值有没有定义，有的话就清除掉上一次的。然后在进行画图标。第一次进来时候没有定义也就不走这块，直接进行画图标
                    //mapInit.removeOverlay(carMk);
                }
                //carMk = new BMap.Marker(point,{icon:drivingPoint});  // 创建标注
                carMk = new BMap.Marker(point,{});  // 创建标注
                carMk.setLabel(getNumberLabel(pointNum));
                carMk.setRotation(trackUnit.route);//trackUnit.route
                carMk.addEventListener("click",function(e){
                    openInfo(address,point);
                });
                //getAngle(point,prePoint);// js求解两点之间的角度
                //carMk.setRotation(getAngle(point,prePoint)-90);// 旋转的角度
                mapInit.addOverlay(carMk);               // 将标注添加到地图中
                carMk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            }
        }
        var opts = {
                width : 200,     // 信息窗口宽度
                height: 50,     // 信息窗口高度
                title : "" , // 信息窗口标题
                enableMessage:true//设置允许信息窗发送短息
            };
         function openInfo(content,point){
             var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
             map.openInfoWindow(infoWindow,point); //开启信息窗口
         }
        //获得角度的函数
        function getAngle(n,next){
            var ret
            var w1 = n.lat/180 * Math.PI
            var j1 = n.lng/180 * Math.PI
            var w2 = next.lat/180 * Math.PI
            var j2 = next.lng/180 * Math.PI
            ret = 4 * Math.pow(Math.sin((w1 - w2) / 2), 2) - Math.pow(Math.sin((j1 - j2) / 2) * (Math.cos(w1) - Math.cos(w2)), 2);
            ret = Math.sqrt(ret);
            var temp = Math.sin((j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
            console.log(temp)
            ret = ret/temp;
            ret = Math.atan(ret) / Math.PI * 180 ;
            ret += 90;
            if(j1-j2 < 0){
                if(w1-w2 < 0){
                    ret;
                }else{
                    ret = -ret+180;
                }
            }else{
                if(w1-w2 < 0){
                    ret = 180+ret;
                }else{
                    ret = -ret;
                }
            }
            return ret ;
        }
    </script>
</body>
</html>

分享到：
| 高德坐标和百度坐标转换
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    百度地图(在线/离线)实时画出运行轨迹(源码)

    本人百度地图系列博客文章源码，百度地图实时画出运行轨迹，车头实时指向行驶方向，设置角度偏移。对应效果地址：https://blog.csdn.net/xiaoge_586/article/details/116694492

    通过百度地图api获取运行轨迹

    【标题】"通过百度地图API获取运行轨迹"涉及的关键知识点主要集中在使用百度地图服务来追踪和展示移动对象的路径。百度地图API是一个强大的工具，它提供了丰富的地理信息系统（GIS）功能，包括地图显示、定位、路线...

    百度地图运动轨迹 车辆行驶轨迹

    在IT行业中，尤其是在地理信息系统（GIS）和Web开发领域，"百度地图运动轨迹 车辆行驶轨迹"是一个常见的应用场景。这个主题涉及到如何利用百度地图API来追踪和展示车辆的行驶路径，通常用于物流监控、交通管理或者...

    百度地图显示多点坐标并连线显示用户轨迹

    读取移动端存入数据库的坐标位置信息显示在百度地图上并连线显示用户轨迹。 程序为mysql数据库，location.sql为数据库导出文件 数据库连接信息见BaiduMap\src\com\pandora\db\SqlConnection.java 运行环境：...

    百度地图中标注车辆轨迹

    总之，利用百度地图API，结合GPS数据处理技术，我们可以轻松地在地图上标注出车辆的运行轨迹，实现可视化展示和进一步的数据分析。这个过程不仅提升了工作效率，也为智慧交通、智慧城市等领域的应用提供了强大支持。

    基于百度地图的轨迹显示

    【基于百度地图的轨迹显示】是一个Android应用的实例，它展示了如何在百度地图API上实现用户的运动轨迹可视化。这个demo的目的是帮助开发者了解如何利用百度地图服务来收集、存储和展示用户的位置数据，特别是在运动...

    Android百度地图画运动轨迹和GPS定位

    在Android开发中，使用百度地图API来实现运动轨迹和GPS定位是一项常见的功能。这个实训项目主要涉及以下几个核心知识点： 1. **百度地图API**：首先，你需要集成百度地图SDK到你的Android项目中。这通常包括在项目...

    IOS百度地图的实时绘出运行轨迹

    本示例项目"IOS百度地图的实时绘出运行轨迹"旨在帮助初学者理解如何利用百度地图SDK在真机上实现这一功能。首先，我们需要了解一些基本概念： 1. **百度地图SDK**：百度地图为开发者提供了强大的地图API，包括定位...

    百度地图：行走轨迹，轨迹回放

    这包括导入百度地图SDK，配置权限，初始化地图，以及编写处理定位和轨迹显示的代码。 总结来说，这个项目涵盖了百度地图SDK的使用，特别是行走轨迹的记录与回放功能。它涉及到地图定位、数据存储、动画处理等多个...

    百度地图API记录轨迹和里程Javascript版html

    百度地图API是百度提供的一套用于开发地图相关应用的接口，通过JavaScript语言调用，可以方便地在网页上实现地图的显示、标注、轨迹绘制等功能。要使用这个API，你需要在百度地图开放平台（http://lbsyun.baidu.com/...

    echarts+百度地图实现个人轨迹-点随线顺序移动

    在本文中，我们将深入探讨如何使用ECharts与百度地图结合，来实现个人轨迹的动态展示，其中亮点是点随线顺序移动的效果。ECharts是一款基于JavaScript的数据可视化库，而百度地图则是国内广泛应用的地图服务提供商。...

    javascript百度地图行驶轨迹、车辆跟随路径移动并变化方向

    javascript百度地图行驶轨迹、车辆跟随路径移动并变化方向,只需传入起点和终点坐标即可模拟车辆导航，真实导航需要再进行定位，将定位的坐标点实时传入，稍微改动即可

    基于百度地图的个人旅行轨迹记录APP安卓全套源码

    主要依赖于百度地图API，用于实时记录和展示用户的移动轨迹。以下是对这个项目的一些关键知识点的详细解释： 1. **Android开发环境**：这个项目是用Android Studio进行开发的，因为AndroidManifest.xml文件是...

    百度地图轨迹划线 轨迹跟踪 跑步Demo

    使用百度地图API提供的Overlay类，我们可以创建自定义的标注，将每个位置点连接起来形成连续的线条，显示用户的运动轨迹。 5. **实时轨迹跟踪**：为了实现实时跟踪功能，我们需要在地图上实时更新用户的位置。每当...

    百度地图 实时计程 轨迹涂鸦 参赛作品 Android源码

    这篇文档将深入解析“百度地图 实时计程 轨迹涂鸦 参赛作品 Android源码”这一项目，帮助你理解其中的关键技术点和实现原理。该项目是基于Android平台，利用百度地图API来实现车辆实时轨迹记录和展示，同时具有轨迹...

    swift-基于百度地图SDK的运动轨迹记录行进速度行进方向行走距离

    在Swift编程语言中，开发基于百度地图SDK的应用可以实现丰富的地图功能，如运动轨迹记录、行进速度计算、行进方向获取以及行走距离测量。这些功能对于健康追踪、导航、户外活动等多种应用场合非常实用。以下将详细...

    android 百度定位、离线地图、测量、运动轨迹doem基于百度地图的部分功能

    在Android开发中，百度地图API提供了丰富的功能，包括定位、离线地图、测量以及运动轨迹绘制等。这些功能使得开发者可以构建出具有专业地理信息处理能力的应用。在使用百度地图API时，尤其对于Android 6.0及以上版本...

    百度地图鹰眼轨迹SDK

    百度地图鹰眼轨迹SDK是一款专门为开发者设计的地理位置服务工具，它能够帮助开发者轻松地在应用中实现对物体或人员的轨迹追踪、管理及展示功能。这款SDK提供了丰富的API接口，支持多种开发语言，使得开发者能够无缝...

    Qt5.14.0实现百度地图API的调用，使用QWebEngineView实现地图网页的显示

    Qt5实现百度地图API的调用——物体轨迹的设计、插入、删除、保存、读取。使用js文件实现Qt和API之间的沟通。https://mp.csdn.net/editor/html/114036591中有项目效果运行截图和简要的说明，欢迎交流。

    iOS百度地图实时绘制轨迹（后台仍然执行）

    总之，通过合理使用百度地图SDK提供的定位服务和地图视图，我们可以实现在iOS应用中实时绘制轨迹的功能，且在后台也能保持这一功能。需要注意的是，为了保证用户体验和遵守苹果的隐私政策，应始终谨慎处理位置数据的...

Magicbox
Global site tag (gtag.js) - Google Analytics