高德地图API之货车路线
程序员文章站
2022-05-03 22:01:22
货车路线： 引入 AMap.TruckDriving 注意：和驾车路线、步行路线不同的是，必须指定cidy和size，并且坐标传入为json格式 map</ti ......</div>
<div class="content">
<p>货车路线：</p>
<p>引入 amap.truckdriving</p>
<p>注意：和驾车路线、步行路线不同的是，必须指定cidy和size，并且坐标传入为json格式</p>
<div class="cnblogs_code">
<pre class="brush: html;"><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>map</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.truckdriving,amap.autocomplete"></script>
<style>
*{margin:0;padding:0;list-style: none;}
#container {width:100%; height: 100%;top:0;left:0;position: absolute; }
#panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}
#search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}
</style>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<script>
var map=new amap.map("container",{
zoom:11
});
console.log(map.getcenter().tostring());//121.549792,29.868388
new amap.truckdriving({
map:map,
panel:"panel",
city:"宁波",
size:1
}).search([{lnglat:[121.549792,29.868388]},{lnglat:[121.549792,30.468388]},{lnglat:[121.549792,31.368388]}],function(status,data){
//console.log(data);
});
</script>
</body>
</html></pre>
</div>
<p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDAzMDkvYl8wXzIwMjAwMzA5MTcyMzIzMjk0OS5wbmc=" alt="高德地图API之货车路线" title="高德地图API之货车路线"></p>
<p> </p>
<p>使用地点名来规划货车路线</p>
<div class="cnblogs_code">
<pre class="brush: html;"><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>map</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.truckdriving,amap.autocomplete"></script>
<style>
*{margin:0;padding:0;list-style: none;}
#container {width:100%; height: 100%;top:0;left:0;position: absolute; }
#panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}
#search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}
</style>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<script>
var map=new amap.map("container",{
zoom:11
});
console.log(map.getcenter().tostring());//121.549792,29.868388
new amap.truckdriving({
map:map,
panel:"panel",
city:"宁波",
size:1
}).search([
{keyword:"宁波大学"},
{keyword:"宁波老外滩"}
],function(status,data){
//console.log(data);
});
</script>
</body>
</html></pre>
</div>
<p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDAzMDkvYl8wXzIwMjAwMzA5MTcyMzI0OTg0OC5qcGc=" alt="高德地图API之货车路线" title="高德地图API之货车路线"></p>
<p> </p>
<p>可以用于多点的情况</p>
<div class="cnblogs_code">
<pre class="brush: html;"><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>map</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.truckdriving,amap.autocomplete"></script>
<style>
*{margin:0;padding:0;list-style: none;}
#container {width:100%; height: 100%;top:0;left:0;position: absolute; }
#panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}
#search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}
</style>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<script>
var map=new amap.map("container",{
zoom:11
});
console.log(map.getcenter().tostring());//121.549792,29.868388
new amap.truckdriving({
map:map,
panel:"panel",
city:"宁波",
size:1
}).search([
{keyword:"宁波大学"},
{keyword:"宁波老外滩"},
{keyword:"宁波大厦"}
],function(status,data){
//console.log(data);
});
</script>
</body>
</html></pre>
</div>
<p> <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDAzMDkvYl8wXzIwMjAwMzA5MTcyMzI0MTk0OC5qcGc=" alt="高德地图API之货车路线" title="高德地图API之货车路线"></p>
<p> </p>
<p> </p>
<p>通过事件来规划货车路线</p>
<div class="cnblogs_code">
<pre class="brush: html;"><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>map</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.truckdriving,amap.autocomplete"></script>
<style>
*{margin:0;padding:0;list-style: none;}
#container {width:100%; height: 100%;top:0;left:0;position: absolute; }
#panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}
#search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}
</style>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<div id="search">
起点<input type="text" id="node1"><br>
终点<input type="text" id="node2"><br>
<button id="btn">开始导航</button>
</div>
<script>
var map=new amap.map("container",{
zoom:11
});
console.log(map.getcenter().tostring());//121.549792,29.868388
new amap.autocomplete({
input:"node1"
})
new amap.autocomplete({
input:"node2"
})
btn.onclick=function(){
new amap.truckdriving({
map:map,
panel:"panel",
city:"宁波",
size:1
}).search([
{keyword:node1.value,city:"宁波"},
{keyword:node2.value,city:"宁波"}
],function(status,data){
//console.log(data);
});
}
</script>
</body>
</html></pre>
</div>
<p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDAzMDkvYl8wXzIwMjAwMzA5MTcyMzI1MTEzNC5qcGc=" alt="高德地图API之货车路线" title="高德地图API之货车路线"></p>
<p> </p>
<p>也可以增加多点</p>
<div class="cnblogs_code">
<pre class="brush: html;"><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>map</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.truckdriving,amap.autocomplete"></script>
<style>
*{margin:0;padding:0;list-style: none;}
#container {width:100%; height: 100%;top:0;left:0;position: absolute; }
#panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}
#search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}
</style>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<div id="search">
起点<input type="text" id="node1"><br>
途径<input type="text" id="node3"><br>
终点<input type="text" id="node2"><br>
<button id="btn">开始导航</button>
</div>
<script>
var map=new amap.map("container",{
zoom:11
});
console.log(map.getcenter().tostring());//121.549792,29.868388
new amap.autocomplete({
input:"node1"
})
new amap.autocomplete({
input:"node2"
})
new amap.autocomplete({
input:"node3"
})
btn.onclick=function(){
new amap.truckdriving({
map:map,
panel:"panel",
city:"宁波",
size:1
}).search([
{keyword:node1.value,city:"宁波"},
{keyword:node3.value,city:"宁波"},
{keyword:node2.value,city:"宁波"}
],function(status,data){
//console.log(data);
});
}
</script>
</body>
</html></pre>
</div>
<p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDAzMDkvYl8wXzIwMjAwMzA5MTcyMzI1MjA3Ni5qcGc=" alt="高德地图API之货车路线" title="高德地图API之货车路线"></p>
<p> </p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/845698.html">
小米神秘新机现身：或搭载联发科G90游戏芯片 </a>
</p>
<p>
下一篇： <a href="/article/845700.html">
高德地图API之驾车路线 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2103685.html" target="_blank" title="高德地图Javascript API设置域名白名单">
<h2>
高德地图Javascript API设置域名白名单 </h2>
</a>
</li>
<li>
<a href="/article/2059490.html" target="_blank" title="c#两种方式调用google地球,调用COM API以及调用GEPLUGIN 与js交互，加载kml文件，dae文件。将二维高德地图覆盖到到三维谷歌地球表面。">
<h2>
c#两种方式调用google地球,调用COM API以及调用GEPLUGIN 与js交互，加载kml文件，dae文件。将二维高德地图覆盖到到三维谷歌地球表面。 </h2>
</a>
</li>
<li>
<a href="/article/1945279.html" target="_blank" title="解析高德地图api获取省市区，生成最新三级联动sql表">
<h2>
解析高德地图api获取省市区，生成最新三级联动sql表 </h2>
</a>
</li>
<li>
<a href="/article/1897938.html" target="_blank" title="高德地图API 之行政区+范围+平移+经纬度+鼠标样式">
<h2>
高德地图API 之行政区+范围+平移+经纬度+鼠标样式 </h2>
</a>
</li>
<li>
<a href="/article/1897946.html" target="_blank" title="高德地图API之公交路线">
<h2>
高德地图API之公交路线 </h2>
</a>
</li>
<li>
<a href="/article/1897891.html" target="_blank" title="高德地图API常用控件的添加与删除（鹰眼、工具条、比例尺）">
<h2>
高德地图API常用控件的添加与删除（鹰眼、工具条、比例尺） </h2>
</a>
</li>
<li>
<a href="/article/1897886.html" target="_blank" title="高德地图API之缩放比例尺控件+3D转换">
<h2>
高德地图API之缩放比例尺控件+3D转换 </h2>
</a>
</li>
<li>
<a href="/article/1897888.html" target="_blank" title="高德地图API，地图类型切换（卫星地图）">
<h2>
高德地图API，地图类型切换（卫星地图） </h2>
</a>
</li>
<li>
<a href="/article/1870989.html" target="_blank" title="VUE组件 之 高德地图地址选择">
<h2>
VUE组件 之 高德地图地址选择 </h2>
</a>
</li>
<li>
<a href="/article/1858189.html" target="_blank" title="高德地图API之步行路线">
<h2>
高德地图API之步行路线 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>