高德地图——货车导航
插件:plugin=AMap.TruckDriving
第一种方法:使用坐标,比驾驶和骑行多了city和size属性,且需要放入的是json数据
new AMap.TruckDriving({map:map,panel:'panel',city:'beijing',//城市size:1 //大小}).search([{lnglat:[116.379391,39.861536]},{lnglat:[116.979391,39.161536]},{lnglat:[116.579391,40.861536]}],function(status,data){console.log(data);
});
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script type="text/javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=34614f775ec9455cf2f9a5c7bb6acfa0&plugin=AMap.TruckDriving,AMap.Autocomplete"></script>
<style type="text/css">*{margin: 0;padding: 0;list-style: none;}#container{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}#panel{position: fixed;background: white;top: 10px;right: 10px;width: 280px;}#search{width: 200px;height: 100px;position: absolute;left: 10px;right: 10px;background: white;}
</style></head>
<body><div id="container"></div> <div id="panel"></div><div id="search">起点:<input type="text" name="" id="startNode"><br>终点:<input type="text" name="" id="endNode"><br><button id="btn">开始导航</button></div><script type="text/javascript">var map = new AMap.Map('container',{zoom:11,center:[116.379391,39.861536],});new AMap.TruckDriving({map:map,panel:'panel',city:'beijing',size:1}).search([//放入的json数据,多点数据{lnglat:[116.379391,39.861536]},{lnglat:[116.979391,39.161536]},{lnglat:[116.579391,40.861536]}],function(status,data){console.log(data);}) </script>
</body>
</html>
第二种方法:使用keyword
new AMap.TruckDriving({map:map,panel:'panel',city:'beijing',//城市size:1 //大小}).search([{keyword:'起点'},{keyword:'途径点'}{keyword:'途径点'}{keyword:'终点'}],function(status,data){console.log(data);
});
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script type="text/javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=34614f775ec9455cf2f9a5c7bb6acfa0&plugin=AMap.TruckDriving,AMap.Autocomplete"></script>
<style type="text/css">*{margin: 0;padding: 0;list-style: none;}#container{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}#panel{position: fixed;background: white;top: 10px;right: 10px;width: 280px;}#search{width: 200px;height: 100px;position: absolute;left: 10px;right: 10px;background: white;}
</style></head>
<body><div id="container"></div> <div id="panel"></div><div id="search">起点:<input type="text" name="" id="startNode"><br>途经:<input type="text" name="" id="centerNode"><br>终点:<input type="text" name="" id="endNode"><br><button id="btn">开始导航</button></div><script type="text/javascript">var map = new AMap.Map('container',{zoom:11,center:[116.379391,39.861536],});/*new AMap.TruckDriving({map:map,panel:'panel',city:'beijing',size:1}).search([{keyword:'北京南站'},{keyword:'天宫院'},{keyword:'西单'}],function(status,data){console.log(data);});
*/new AMap.Autocomplete({input:'startNode'});new AMap.Autocomplete({input:'endNode'});new AMap.Autocomplete({input:'centerNode'});btn.onclick = function(){new AMap.TruckDriving({map:map,panel:'panel',city:'beijing',size:1}).search([{keyword:startNode.value,city:'北京'},{keyword:centerNode.value,city:'北京'},{keyword:endNode.value,city:'北京'}],function(status,data){console.log(data);})};</script>
</body>
</html>