マーカのスタイルをCSSで変更する

実行結果

ZDC.Markerの画像にCSSを適用することは動作保障外となっています。
そのため、次の例では、ユーザウィジットでマーカ画像を作成します。
このマーカはCSSでスタイルを変更できます。
※ IE6では正常に動作しません。

ソースコードと解説

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,control.js,userwidget.js&enc=EUC" type="text/javascript"></script>
<style type="text/css">
<!--
#mrk:hover #base  {opacity: 0.7; filter:alpha(opacity=70);}
#mrk:hover #content {opacity: 0.7; filter:alpha(opacity=70);}
-->
</style>
<script type="text/javascript">

    var map, dom, base, content;

    function loadMap() {
        map = new ZDC.Map(document.getElementById('ZMap'),
    {
        zoom: 9,
        mapType: ZDC.MAPTYPE_HIGHRES_LV18
    });

        map.addWidget(new ZDC.ScaleBar());
        map.addWidget(new ZDC.Control());

        /* マーカ用DOM */
        dom = document.createElement('div');
        dom.setAttribute('id', 'mrk');

        /* 下地画像 */
        base = document.createElement('img');
        base.setAttribute('id', 'base');

        /* 下地画像のロード後に重畳画像をロードする */
        base.onload = baseLoadend;

        /* onloadイベントハンドラ登録後にsrcを指定(IEのonloadイベント対応) */
        base.src = '../img/wgtbase.gif';
        base.style.position = 'absolute';

    };

    /* 重畳画像をロードする */
    function baseLoadend() {
        content = document.createElement('img');
        content.setAttribute('id', 'content');

        /* 重畳画像のロード後にユーザウィジットを作成する */
        content.onload = contentLoadend;

        /* onloadイベントハンドラ登録後にsrcを指定(IEのonloadイベント対応) */
        content.src = '../img/wgtcontent.png';
        content.style.position = 'absolute';
        content.style.top = '5px';
        content.style.left = '5px';

    };

    /* ユーザウィジットを作成する */
    function contentLoadend() {
        dom.appendChild(base);
        dom.appendChild(content);

        var widget = new ZDC.UserWidget(
            map.getLatLon(),
            {
                size: new ZDC.WH(41, 50),
                offset: new ZDC.Pixel(-20,-50),
                dom: dom
            });
        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>