矢印線を描画する

実行結果

次の例では、クリックした地点まで矢印線を移動します。

ソースコードと解説

矢印線を描画するには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 arrow_pl, map;

    function loadMap() {
        var lat = 35.6747325, lon = 139.777961111;

        map = new ZDC.Map(
            document.getElementById('ZMap'),
            {
                latlon: new ZDC.LatLon(lat, lon),
                zoom: 9,
                mapType: ZDC.MAPTYPE_HIGHRES_LV18
            }
        );

        drawPolylineWithArrow(map);

        ZDC.addListener(map, ZDC.MAP_CLICK, addPointRedraw);

        map.addWidget(new ZDC.ScaleBar());
        map.addWidget(new ZDC.Control());
    }
    function addPointRedraw() {
        var ll = map.getClickLatLon();
        arrow_pl.addPoint(ll);
        arrow_pl.redraw();
    }
    function drawPolylineWithArrow(map) {
        var latlons = [];
        latlons.push(new ZDC.LatLon(35.670181389, 139.764272222));
        latlons.push(new ZDC.LatLon(35.673096944, 139.768094444));
        latlons.push(new ZDC.LatLon(35.678928056, 139.770494444));

        arrow_pl = new ZDC.ArrowPolyline(map, latlons);
    }

</script>
</head>

<body onload="loadMap();">
    <div id="ZMap" style="border:1px solid #777777; width:750px; height:500px; top:0px; left:20px; position:absolute;"></div>
</body>
</html>