矢印線を描画するにはZDC.ArrowPolylineクラスを利用します。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,shape.js,userwidget.js,control.js&enc=UTF8" type="text/javascript"></script> <!-- 取得したarrow_polyline.jsを別途インクルードする --> <script src="arrow_polyline-1.0.js"></script> <script type="text/javascript"> var map, arrowPl; function loadMap() { var lat = 35.711568056, lon = 139.725961111; map = new ZDC.Map( document.getElementById('ZMap'), { latlon: new ZDC.LatLon(lat, lon), zoom: 6, mapType: ZDC.MAPTYPE_HIGHRES_LV18 } ); drawPolylineWithArrow(); map.addWidget(new ZDC.ScaleBar()); map.addWidget(new ZDC.Control()); } function drawPolylineWithArrow () { if (arrowPl) { arrowPl.remove(); } var latlons = [], type; latlons.push(new ZDC.LatLon(35.66, 139.65)); latlons.push(new ZDC.LatLon(35.70, 139.769338889)); latlons.push(new ZDC.LatLon(35.798341389, 139.769338889)); var typeId = document.getElementById("mySelect").value; switch (typeId) { case "0": type = ZDC.ARROW_TRIANGLE; break; case "1": type = ZDC.ARROW_THIN; break; case "2": type = ZDC.ARROW_LINEAR; break; case "3": type = ZDC.ARROW_FAT; break; default: type = ZDC.ARROW_TRIANGLE; break; } arrowPl = new ZDC.ArrowPolyline( map, latlons, { arrowType: type } ); } </script> </head> <body onload="loadMap();"> <div id="ZMap" style="border:1px solid #777777; width:750px; height:500px; top:0px; left:20px; position:absolute;"></div> <div style="top:450px; left:36px; position:absolute;"> <select id="mySelect" onchange="drawPolylineWithArrow()"> <option value="0" selected="true">ZDC.ARROW_TRIANGLE</option> <option value="1">ZDC.ARROW_THIN</option> <option value="2">ZDC.ARROW_LINEAR</option> <option value="3">ZDC.ARROW_FAT</option> </select> </div> </body> </html>