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>