ホ−ム » 応用サンプル » スタティックユーザウィジットをドラッグする

スタティックユーザウィジットをドラッグする

実行結果

次の例では、スタティックユーザウィジットをドラッグして移動できます。

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to ./apisample/advanced/widget_030.html

ソースコードと解説

スタティックユーザウィジットをドラッグして移動させるには、ZDC.addListener()を利用します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<script src="http://api.its-mo.com/cgi/loader.cgi?key=JSZ752c40ded32d&ver=2.0&api=zdcmap.js,userwidget.js&enc=EUC&force=1" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    var map, widget, widgetTL, difT, difL,
        isopenbtn = false, dragging = false,
        lat = 35.6778614, lon = 139.7703167;

    function loadMap() {
        map = new ZDC.Map(
            document.getElementById('ZMap'),
            {
                latlon: new ZDC.LatLon(lat, lon),
                zoom: 3
            }
        );

        /* 地図上の緯度経度を取得(getPointerPosition)できるようにする */
        map.pointerPositionOn();

        /* スタティックユーザウィジットを作成 */
        widgetTL = new ZDC.TL(10, 20);
        /* 緯度経度を取得するためにpropagationをtrueにする */
        var widgetlabel = {html: getCloseHtml(), propagation: true};
        widget = new ZDC.StaticUserWidget(widgetTL, widgetlabel);

        /* スタティックユーザウィジットを追加 */
        map.addWidget(widget);

        /* スタティックユーザウィジットを表示 */
        widget.open();

        ZDC.addListener(map, ZDC.MAP_MOUSEMOVE, onMouseMove);
        ZDC.addListener(map, ZDC.MAP_MOUSEUP, onMouseUp);
        ZDC.addListener(map, ZDC.MAP_CHG_ZOOM, function() {
                if(!isopenbtn){ widget.setHtml(getCloseHtml()); }
            });

        ZDC.addListener(widget, ZDC.STATICUSERWIDGET_MOUSEDOWN, onMouseDown);
        ZDC.addListener(widget, ZDC.STATICUSERWIDGET_MOUSEUP, onMouseUp);

        /* 地図領域の外でマウスアップ時にドラッグを終了する */
        ZDC.addDomListener(document, 'mouseup', onMouseUp);
    };

    /* マウスダウンイベント処理 */
    function onMouseDown() {
            map.dragOff();
            /* マウスダウン位置とスタティックユーザウィジットの配置位置の差分を保持 */
            var pLatLon = map.getPointerPosition();
            var pTL = map.latLonToTL(pLatLon);
            difT = widgetTL.top - pTL.top
            difL = pTL.left - widgetTL.left

            dragging = true;
    };

    /* マウスアップイベント処理 */
    function onMouseUp() {
        dragging = false;
        map.dragOn();
    };

    /* マウスムーブイベント処理 */
    function onMouseMove() {
        /* ドラッグ中のみ処理させる */
        if(dragging) {
            /* スタティックユーザウィジットの配置位置を変更 */
            var latlon = map.getPointerPosition();
            var cTL = map.latLonToTL(latlon);
            var wgtT = cTL.top + difT;
            var wgtL = cTL.left - difL;
            widget.movePosition(new ZDC.TL(wgtT, wgtL));
            widgetTL = new ZDC.TL(wgtT, wgtL);
        }
        /* closeボタン表示中は緯度経度の値を更新する */
        if(!isopenbtn) {
            widget.setHtml(getCloseHtml());
        }
    };

    /* closeボタン押下時の処理 */
    function closeclick() {
        widget.setHtml(getOpenHtml());
        isopenbtn = true;
    };

    /* openボタン押下時の処理 */
    function openclick() {
        widget.setHtml(getCloseHtml());
        isopenbtn = false;
    };

    /* openボタンを表示するHTMLソース */
    function getOpenHtml() {
        var openhtml;
        openhtml = '<div onMouseDown="return false;" style="background-color: #FFFFFF; ';
        openhtml += 'border:1px solid #777777;">ドラッグで移動できます';
        openhtml += '<input type="button" value="open" onclick="openclick();";></div>';

        return openhtml;
    };

    /* closeボタンと中心点の緯度経度を表示するHTMLソース */
    function getCloseHtml() {
        var ll = map.getLatLon();
        /* 度分秒形式に変換 */
        lon = ZDC.degTodms(ll.lon);
        lat = ZDC.degTodms(ll.lat);

        var lon_txt = 'E '+lon.deg+'°'+lon.min+'′'+lon.sec+'″',
            lat_txt = 'N '+lat.deg+'°'+lat.min+'′'+lat.sec+'″';
        var closehtml;
        closehtml = '<div onMouseDown="return false;" style="background-color: #FFFFFF; ';
        closehtml += 'border:1px solid #777777;">ドラッグで移動できます';
        closehtml += '<input type="button" value="close" onclick="closeclick();">';
        closehtml += '<ul style="list-style-type: none; margin: 0; padding: 0;">';
        closehtml += '<li>地図中心の緯度経度</li>';
        closehtml += '<li>' + lon_txt + '</li>';
        closehtml += '<li>' + lat_txt + '</li>';
        closehtml += '</ul></div>';

        return closehtml;
    };
//]]>
</script>
</head>

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