高德地图规划路线

功能点分享

已于 2024-01-12 08:59:13 修改

阅读量787

点赞数 19

分类专栏： html 文章标签： javascript html

于 2024-01-12 08:58:06 首次发布

本文链接：https://blog.csdn.net/qq_33476262/article/details/135543386

版权

html 专栏收录该内容

5 篇文章

订阅专栏

高德地图规划路线

<!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>
    <style>
	
.box{ width:100%; height:100vh; display:block; overflow:hidden; }	
      #container {
        width:100vw;
        height: 100vh;
		margin:0; padding:0;
		display: block; 
      }
    </style>
  </head>
  <body>
  <div class="box">
    <div id="container"></div>
  </div>
  </body>
</html>

导入高德地图js，配置地址要是

 <script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: "xxx", //高德地图开发者申请的秘钥
  };
</script>

<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
  AMapLoader.load({
    key: "xxxx", //申请好的Web端开发者 Key，调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
	plugins: ["AMap.Driving",], //导入路线规划的插件
	
	
  }).then((AMap) => {
      const map = new AMap.Map("container",{
		  zoom:8, //地图级别
          center: [108.27331,22.78121], 
		  });
 //创建开始坐标点
 const warehouse_point = new AMap.LngLat(108.30,22.75); //Marker 经纬度
		const marker_warehouse = new AMap.Marker({
		 icon:new AMap.Icon({            
			 image: 'images/shdz.png',
			 size: new AMap.Size(60, 60),  //图标所处区域大小
			 imageSize: new AMap.Size(60,60) //图标大小
		 }),       
		  position:warehouse_point,
		  offset: new AMap.Pixel(-30, -60), 
		
		});
 //创建结束坐标点
 const start_point = new AMap.LngLat(108.81, 23.21); //对应司机最新定位点
		const marker_start = new AMap.Marker({
		 icon:new AMap.Icon({            
			 image: 'images/shdz.png',
			 size: new AMap.Size(60, 60),  //图标所处区域大小
			 imageSize: new AMap.Size(60,60) //图标大小
		 }),       
		  position:start_point,
		  offset: new AMap.Pixel(-30, -60), 
		
		});		
// 路线规划

AMap.plugin('AMap.Driving', function() {	
  var driving = new AMap.Driving({
    // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
    policy: AMap.DrivingPolicy.LEAST_TIME,
	map: map,
	hideMarkers:true
		
  })
  var startLngLat = [108.30,22.75]  //定义的的开始坐标
  var endLngLat = [108.81, 23.21]   // 定义的结束坐标
  driving.search(startLngLat, endLngLat, function (status, result) {
  })
})		

const markerList = [marker_warehouse,marker_start, marker_end];
map.add(markerList);	  
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
	
</script>