位置经纬度 + 货车路线规划

最新推荐文章于 2024-12-28 18:56:52 发布

ForrestGumpZHanG

最新推荐文章于 2024-12-28 18:56:52 发布

阅读量627

点赞数 1

CC 4.0 BY-SA版权

分类专栏：高德地图

本文链接：https://blog.youkuaiyun.com/qq_36026747/article/details/80886131

高德地图专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个基于高德地图API的货车路线规划示例，通过设置起点、途经点及终点来展示如何进行路线规划，并利用JavaScript实现地图上的标记。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>货车路线规划－使用经纬度</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0"/>
<script src="http://webapi.amap.com/maps?v=1.4.2&key=6202c32e3dccbecd6d7251d9f396db30&plugin=AMap.PolyEditor,AMap.CircleEditor,AMap.MouseTool,AMap.ToolBar,AMap.Driving"></script>
<script type="text/javascript" src='http://webapi.amap.com/maps?v=1.4.6&key=6202c32e3dccbecd6d7251d9f396db30&plugin=AMap.TruckDriving'></script> 
<script type="text/javascript" src="http://139.224.44.115:8010/Resource/js/jquery-2.0.0.min.js"></script>


    <style type="text/css">
        #panel{
            position: fixed;
            top:10px;
            right: 10px;
            width: 300px;
        }
    </style>
</head>
<body>
<div id="mapContainer"></div>
<div id="panel"></div>
<div class="button-group">
    <input type="button" class="button" value="改变当前位置" id="start"/>
</div>
</div>
<script type="text/javascript">
var truck = "http://139.224.44.115:8010/Resource/images/truck.png";
    var map = new AMap.Map("mapContainer", {});
    var truckOptions = {
            map: map,
            policy:0,
            size:1,
            city:'beijing',
            panel:'panel'
    };
    var driving = new AMap.TruckDriving(truckOptions);
var a = Number(116)+Number(Math.random().toFixed(6));
var b = Number(39)+Number(Math.random().toFixed(6));
var tujin = [a, b];

var path = [];//Math.random().toFixed(6)
path.push({lnglat:[116.303843, 39.983412]});//起点
path.push({lnglat:tujin});//途径
path.push({lnglat:[116.407012, 39.992093]});//终点
driving.search(path,function(status, result) {
//TODO something
});
marker = new AMap.Marker({
map: map,
position: tujin,
icon: truck,
offset: new AMap.Pixel(-26, -13)
});

$("#panel").hide();

    AMap.event.addDomListener(document.getElementById('start'), 'click', function() {
       
    }, false);	



    
</script>
</body>
</html>