利用高德地图通过给定坐标点画带箭头方向的路径
Posted GuliGugaLiz
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用高德地图通过给定坐标点画带箭头方向的路径相关的知识，希望对你有一定的参考价值。
这是到新公司以后接到的第一个任务（测试任务），嘿嘿，第一次画地图，一开始整个人都方了。。。方过了一个周末，还好两天差不多就弄出来了。感谢互联网啊，让我这种渣渣得以继续生存，但是也意识到自己编码能力真的需要努力。废话不多说了，来上需求和实现代码吧。
【需求】
通过给定的经纬度坐标点来自定义规划线路，要求，道路中有方向指向标志，如图：
【思路】
1.渲染地图进来
2.在地图上选取你要的坐标点，并在地图上打上坐标点
3.根据获取的坐标点经纬度连线，并选择箭头属性为true
【代码】
<!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/main1119.css"/> <style> .marker { color: #ff6600; padding: 4px 10px; border: 1px solid #fff; white-space: nowrap; font-size: 12px; font-family: ""; background-color: #0066ff; } </style> <script src="http://webapi.amap.com/maps?v=1.3&key=amapA8fIRfAbK"></script> <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script> </head> <body> <div id="container"></div> <div class="button-group"> <input type="button" class="button" value="添加点标记覆盖物" id="addMarker"/> <input type="button" class="button" value="更新点标记覆盖物" id="updateMarker"/> <input type="button" class="button" value="删除点标记覆盖物" id="clearMarker"/> <input type="button" class="button" value="绘制轨迹" id="drawLine" /> </div> <script> var marker, map = new AMap.Map("container", { resizeEnable: true, center: [116.397428,39.90923], zoom: 13 }); //AMap.event.addListener(map,"complete",completeEventHandler);//加载完成后 AMap.event.addListener(map,\'click\',getLnglat); //点击获取坐标事件 AMap.event.addDomListener(document.getElementById(\'addMarker\'), \'click\', function() { addMarker(); }, false); AMap.event.addDomListener(document.getElementById(\'updateMarker\'), \'click\', function() { marker && updateMarker(); }, false); AMap.event.addDomListener(document.getElementById(\'clearMarker\'), \'click\', function() { if (marker) { marker.setMap(null); marker = null; } }, false); AMap.event.addDomListener(document.getElementById(\'drawLine\'),\'click\',function(){ drawLine(); },false); //获取坐标 function getLnglat(e){ var x = e.lnglat.getLng(); var y = e.lnglat.getLat(); alert(x+","+y); }; // 实例化点标记 function addMarker() { if (marker) { return; } marker = new AMap.Marker({ icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", position: [116.397428,39.90923] }); marker.setMap(map); } function updateMarker() { // 自定义点标记内容 var markerContent = document.createElement("div"); // 点标记中的图标 var markerImg = document.createElement("img"); markerImg.className = "markerlnglat"; markerImg.src = "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"; markerContent.appendChild(markerImg); // 点标记中的文本 var markerSpan = document.createElement("span"); markerSpan.className = \'marker\'; markerSpan.innerHTML = "end"; markerContent.appendChild(markerSpan); marker.setContent(markerContent); //更新点标记内容 marker.setPosition([116.397428,39.90923]); //更新点标记位置 } //轨迹绘制 //地图图块加载完毕后执行函数 function drawLine(){ marker = new AMap.Marker({ map:map, //draggable:true, //是否可拖动 position:new AMap.LngLat(116.396913,39.908111),//基点位置 offset:new AMap.Pixel(-13,-27), //相对于基点的位置 autoRotation:true }); marker = new AMap.Marker({ map:map, //draggable:true, //是否可拖动 position:new AMap.LngLat(116.420087,39.908374),//基点位置 offset:new AMap.Pixel(-13,-27), //相对于基点的位置 autoRotation:true }); marker = new AMap.Marker({ map:map, //draggable:true, //是否可拖动 position:new AMap.LngLat(116.432303,39.909320),//基点位置 offset:new AMap.Pixel(-13,-27), //相对于基点的位置 autoRotation:true }); marker = new AMap.Marker({ map:map, //draggable:true, //是否可拖动 position:new AMap.LngLat(116.434679,39.908769),//基点位置 offset:new AMap.Pixel(-13,-27), //相对于基点的位置 autoRotation:true }); marker = new AMap.Marker({ map:map, //draggable:true, //是否可拖动 icon:"http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",//终点红色 position:new AMap.LngLat(116.434335,39.924568),//基点位置 //title:"116.434335,39.924568", offset:new AMap.Pixel(-13,-27), //相对于基点的位置 autoRotation:true }); //实例化经纬度 //起点 var lngX = 116.396913; var latY = 39.908111; lineArr = new Array(); lineArr.push(new AMap.LngLat(lngX,latY)); lineArr.push(new AMap.LngLat(116.420087,39.908374));//第二个点 lineArr.push(new AMap.LngLat(116.432303,39.909320));//第三个点 lineArr.push(new AMap.LngLat(116.434679,39.908769));//第四个点 lineArr.push(new AMap.LngLat(116.434335,39.924568));//第五个点 //绘制轨迹 var polyline = new AMap.Polyline({ map:map, path:lineArr, strokeColor:"#0066ff",//线颜色 strokeOpacity:1,//线透明度 strokeWeight:5,//线宽 strokeStyle:"solid",//线样式 showDir: true//是否显示箭头 }); //显示坐标 /* function showLnglat(){ var infoBox = []; info.push("116.434335,39.924568") InfoWindow.open(map,new AMap.LngLat(116.434335,39.924568)); }*/ map.setFitView(); } </script> </body> </html>
【效果图】
【参考】
1.酸奶小妹：有一系列入门实用教程案例。http://www.cnblogs.com/milkmap/p/3727842.html
2.打点画线重点代码块。 http://www.myexception.cn/internet/1695984.html
以上是关于利用高德地图通过给定坐标点画带箭头方向的路径的主要内容，如果未能解决你的问题，请参考以下文章