ホ−ム » 応用サンプル » マーカのスタイルをCSSで変更する

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

実行結果

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

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

ソースコードと解説

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

<!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://test.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>
<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">
//<![CDATA[
    var map, dom, base, content;

    function loadMap() {
        map = new ZDC.Map(document.getElementById('ZMap'));

        /* マーカ用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:500px; height:300px; top:0px; left:20px; position:absolute;"></div>
</body>
</html>