高德地图画线，单条多条带方向示例亲测有效，自己也在使用换成你的key就可以

共2个文件

html：2个

需积分: 49 35 浏览量 2020-08-28 15:34:01 上传评论收藏 3KB ZIP 举报

在IT行业中，尤其是在移动应用开发或者Web应用开发中，地图API的使用是非常常见的。高德地图作为一款广泛使用的地图服务，提供了丰富的功能，包括在地图上进行线路绘制。本示例将详细介绍如何利用高德地图API实现单条或多条带有方向指示的线路绘制。我们需要了解高德地图API的基本概念。高德地图API是一套用于在网页或移动应用中集成地图功能的工具集，它允许开发者通过JavaScript或Android/iOS SDK来调用地图服务，如显示地图、定位、路径规划、画线等。在“高德地图画线”的场景中，"单条线"是指在地图上绘制一条从一个点到另一个点的路径，而"多条线"则是指同时绘制多条路径，这通常用于展示复杂的路线网络，比如多段导航路线或者公交线路。"带方向示例"则意味着在路径线上添加了箭头或者其他指示符号，以明确表示行进方向。实现这个功能，开发者需要完成以下几个步骤： 1. **获取高德地图API Key**：你需要在高德地图开放平台注册账号，创建应用并获取API Key。API Key是调用高德地图服务的身份凭证，每个请求都需要携带此Key。 2. **引入高德地图JavaScript库**：在HTML文件（如`one.html`和`demo.html`）中，通过`<script>`标签引入高德地图的JavaScript库。例如： ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script> ``` 将`YOUR_API_KEY`替换为你的实际API Key。 3. **初始化地图**：在JavaScript代码中，使用`AMap`对象初始化地图，并设置地图中心点和级别： ```javascript new AMap.Map('container', { zoom: 10, // 地图级别 center: [116.39,39.9] // 地图中心点坐标 }); ``` 4. **绘制单条线**：利用`AMap.Polyline`类创建线条对象，并设置路径坐标和样式。例如： ```javascript var linePath = [[116.38,39.8], [116.39,39.9]]; // 路径坐标 var lineOptions = { strokeColor: 'blue', // 线条颜色 strokeOpacity: 0.6, // 线条透明度 strokeWeight: 5 // 线条宽度 }; var polyline = new AMap.Polyline({ path: linePath, options: lineOptions }); polyline.setMap(map); // 将线条添加到地图 ``` 5. **绘制多条线**：若需绘制多条线，只需重复上述步骤，但每次创建新的`AMap.Polyline`实例时，提供不同的路径坐标和样式。 6. **添加方向指示**：为了显示行进方向，可以使用`AMap.Icon`定义自定义图标，然后在路径的特定点上添加标记。例如，创建一个箭头图标，然后在每条线的起始和结束点放置： ```javascript var arrowIcon = new AMap.Icon({ size: new AMap.Size(12, 20), // 图标大小 image: 'path/to/arrow.png' // 图标图片URL }); var startMarker = new AMap.Marker({ position: linePath[0], icon: arrowIcon }); var endMarker = new AMap.Marker({ position: linePath[linePath.length - 1], icon: arrowIcon }); startMarker.setMap(map); endMarker.setMap(map); ``` 7. **动态更新路线**：如果需要根据用户输入或其他条件实时更新路线，可以调用`Polyline`对象的`setPath`方法更改路径坐标。通过以上步骤，你可以在高德地图上实现带方向的单条或多条线路绘制。在实际应用中，你可能还需要考虑性能优化、用户交互和错误处理等问题。记住，高德地图API提供了丰富的文档和示例，可以帮助你更好地理解和应用这些功能。

资源推荐

资源详情

资源评论

收起资源包目录

echarts.zip （2个子文件）

one.html 4KB

demo.html 3KB

<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>地图[email protected]</title> <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0"/> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> <style type="text/css"> #panel { position: absolute; background-color: white; max-height: 90%; overflow-y: auto; top: 10px; right: 10px; width: 280px; } </style> </head> <body> <div id="mapContainer"></div> </div> <script type="text/javascript"> // var lineArr2=[ // [118.626495,32.05714], // [118.626785,32.057396], // [118.626892,32.057491], // [118.62735,32.057919], // [118.627472,32.058029], // [118.627556,32.058102], // [118.627808,32.058334], // [118.628204,32.058693], // [118.62896,32.059357], // [118.629112,32.059509], // [118.629295,32.059666] // ]; // var lineArr = new Array(); // var lineArr2 = new Array(); // var lineStr = "118.626495,32.05714;118.626785,32.057396;118.626892,32.057491;118.62735,32.057919;118.627472,32.058029;118.627556,32.058102;118.627808,32.058334;118.628204,32.058693;118.62896,32.059357;118.629112,32.059509;118.629295,32.059666;118.629402,32.05975;118.629501,32.05983;118.629837,32.060143;118.629837,32.060204;118.630028,32.060368;118.630142,32.060471;118.630363,32.060677;118.630371,32.060688;118.630737,32.061008;118.630852,32.061108;118.630989,32.061226;118.631119,32.061359;118.631271,32.061485;118.631645,32.061813;118.63192,32.062057;118.63237,32.062454;118.632515,32.062572;118.632607,32.062645;118.632896,32.062885;118.632988,32.062965;118.633209,32.063141;118.633781,32.06358;118.634094,32.063835;118.634216,32.063919;118.634514,32.064144;118.634811,32.064362;118.634811,32.064362;118.63501,32.064419;118.635162,32.064423;118.6353,32.064396;118.635414,32.064358;118.635788,32.064137;118.635788,32.064137;118.635651,32.063931;118.635597,32.063915;118.635201,32.064106"; //var lineStr = "118.6267142,32.05745306;118.62683,32.05754639;118.62683,32.05754639;118.6273253,32.05798694;118.7961614,32.04856111;118.7965492,32.04848889;118.7968619,32.04842972;118.7969667,32.04841083;118.7971778,32.04831306"; // for(var i =0; i<lineStr.split(';').length;i++){ // lineArr[i] = lineStr.split(';')[i]; // console.log(lineArr[i]); // console.log(lineArr[i].split(',').length); // lineArr2[i] = new Array(); // for(var j=0;j<lineArr[i].split(',').length;j++){ // lineArr2[i][j] = lineArr[i].split(',')[j]; // } // } var lineArr2=[ [118.375364,35.042766], [118.375364,35.050766], [118.372364,35.065766], [118.372364,35.075766], [118.425364,35.175766] ]; // var map = new AMap.Map("mapContainer", { // resizeEnable: true, // center:[118.375364,35.050766], // //center:[114.298479,30.546959], // zoom:13 // }); var map = new AMap.Map('mapContainer'); var polyline = new AMap.Polyline({ path:lineArr2, showDir:true, dirColor:'#fff', strokeOpacity:1, strokeColor: '#3366dd', // 线颜色 strokeWeight: 10, // 线宽 strokeStyle:'solid', strokeDasharray:[10,5], geodesic:true }); // polyline.setMap(map); map.add([polyline]) map.setFitView() </script> <script> </script> </body> </html>

评论收藏

内容反馈