利用高德地圖通過給定坐標點畫帶箭頭方向的路徑
阿新 • • 發佈:2017-07-05
api size null box tool bapi 說了 劃線 加載完成
這是到新公司以後接到的第一個任務(測試任務),嘿嘿,第一次畫地圖,一開始整個人都方了。。。方過了一個周末,還好兩天差不多就弄出來了。感謝互聯網啊,讓我這種渣渣得以繼續生存,但是也意識到自己編碼能力真的需要努力。廢話不多說了,來上需求和實現代碼吧。
【需求】
通過給定的經緯度坐標點來自定義規劃線路,要求,道路中有方向指向標誌,如圖:
【思路】
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
利用高德地圖通過給定坐標點畫帶箭頭方向的路徑