ズームに連動するユーザウィジット

実行結果

次の例では、ユーザウィジットのlockプロパティを利用した、ズームに連動するウィジットを表示します。
lockプロパティを利用すると、ズーム変更に合わせて指定した緯度経度にウィジットの大きさが自動的に調整されます。

ソースコードと解説

ユーザウィジットを表示するには、ZDC.UserWidgetクラスと、ZDC.MapクラスのaddWidget()を利用します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,userwidget.js&enc=EUC" type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[

    /* 重畳する画像のパス */
    var IMAGE_PATH = './../img/widget_sample.png';

    /* 重畳する画像の左上緯度経度 */
    var TOP_LEFT = new ZDC.LatLon(35.525243, 139.750374);

    /* 重畳する画像の右下緯度経度 */
    var BOTTOM_RIGHT = new ZDC.LatLon(35.4154028, 139.96606029999998);

    var map, widget;

    /* 重畳する画像を中心に地図を表示させる */
    var lat = (TOP_LEFT.lat + BOTTOM_RIGHT.lat) / 2;
    var lon = (TOP_LEFT.lon + BOTTOM_RIGHT.lon) / 2;
    var center = new ZDC.LatLon(lat, lon);

    function loadMap() {
        map = new ZDC.Map(
            document.getElementById('ZMap'),
            {
                latlon: center,
                zoom: 5,
                mapType: ZDC.MAPTYPE_DEFAULT

            }
        );

        /* ユーザウィジットに表示するdomオブジェクトを作成 */
        var imgElement = document.createElement('img');
        imgElement.setAttribute("src", IMAGE_PATH);
        imgElement.style.cssText = "width:100%;height:100%;";

        /* ユーザウィジットを作成 */
        widget = new ZDC.UserWidget(TOP_LEFT,
            {
                dom: imgElement,
                lock: BOTTOM_RIGHT
            }
        );

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

        /* ユーザウィジットを表示 */
        widget.open();
    };
//]]>
</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>