天地图-第七篇-按轨迹运动

最新推荐文章于 2025-01-14 15:16:42 发布

cherry_vincent

最新推荐文章于 2025-01-14 15:16:42 发布

阅读量2.2k

点赞数 1

分类专栏： Web前端文章标签：天地图 javascript 前端

原文链接：https://www.cnblogs.com/nuoye/p/10564511.html

版权

Web前端专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一个使用天地图API创建地图应用的例子。该应用通过调用天地图的API实现了地图展示，并提供了开始、暂停和结束按钮来控制车辆轨迹的模拟。具体功能包括地图初始化、路径搜索、动态轨迹绘制等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>天地图</title>
    <style>
        /*设置地图显示大小*/
        #mapDiv{
            width: 600px;
            height: 400px;
        }
    </style>
    </head>
    <body onLoad="onLoad()"> 
        <!--地图容器-->
        <div id="mapDiv"></div>
        <div> 
            <input type="button" value="开始" onClick="_CarTrack.start();"/>
            <input type="button" value="暂停" onClick="_CarTrack.pause();"/>
            <input type="button" value="结束" onClick="_CarTrack.stop();"/>
        </div>
    </body>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥"></script>
    <script src="http://lbs.tianditu.gov.cn/js/lib/jquery/jquery-1.7.2.min.js"></script>
    <script src="http://cdn.bootcss.com/d3/3.5.17/d3.js " charset="utf-8"></script>
    <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js"></script>
    <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/CarTrack.js"></script>
    <script type="text/javascript">
        var map;
        var drivingRoute;
        var zoom = 13;
        var _CarTrack;
        var startIcon = "http://lbs.tianditu.gov.cn/images/bus/start.png";    //起点图标
        var endIcon = "http://lbs.tianditu.gov.cn/images/bus/end.png";        //终点图标
        function onLoad() {
            map = new T.Map('mapDiv');
            map.centerAndZoom(new T.LngLat(116.40069, 39.89945), zoom);
            map.addControl(TMAP_HYBRID_MAP);
            var config = {
                policy: 0,    //驾车策略
                onSearchComplete: searchResult    //检索完成后的回调函数
            };
            drivingRoute = new T.DrivingRoute(map, config);
            searchDrivingRoute()
        }

        function searchDrivingRoute() {
            map.clearOverLays();
            var startLngLat = new T.LngLat(116.354060,39.905650);
            var endLngLat = new T.LngLat(116.428130,39.903550);
            //驾车路线搜索
            drivingRoute.search(startLngLat, endLngLat);
        }

        function createRoute(lnglats, lineColor) {
            _CarTrack = new T.CarTrack(map, {
                interval: 20,
                speed: 10,
                dynamicLine: true,
                Datas: lnglats,
                polylinestyle: {color: "#2C64A7", width: 5, opacity: 0.9}
            })
        }

        //添加起始点
        function createStartMarker(result) {
            var startMarker = new T.Marker(result.getStart(), {
                icon: new T.Icon({
                    iconUrl: startIcon,
                    iconSize: new T.Point(44, 34),
                    iconAnchor: new T.Point(12, 31)
                })
            });
            map.addOverLay(startMarker);
            var endMarker = new T.Marker(result.getEnd(), {
                icon: new T.Icon({
                    iconUrl: endIcon,
                    iconSize: new T.Point(44, 34),
                    iconAnchor: new T.Point(12, 31)
                })
            });
            map.addOverLay(endMarker);
        }
        
        function searchResult(result) {
            //添加起始点
            createStartMarker(result);
            obj = result;
            //获取方案个数
            var routes = result.getNumPlans();
            for (var i = 0; i < routes; i++) {
                //获得单条驾车方案结果对象
                var plan = result.getPlan(i);
                createRoute(plan.getPath());

            }
        }
    </script>
</html>

效果如图。