次の例では、マーカをクリックした際に、そのマーカの緯度経度を吹き出しに表示します。
マーカをクリックした際に吹き出しに緯度経度を表示するには、ZDC.bind()とZDC.MsgInfoクラスを利用します。
<!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&enc=UTF8" type="text/javascript"></script> <script type="text/javascript"> var map, lat = 35.6778614, lon = 139.7703167; var ary = [ {name: '都庁', lat: 35.686256389, lon: 139.694937778, mrkId: ZDC.MARKER_COLOR_ID_BLUE_S}, {name: '埼玉県庁', lat: 35.854203056, lon: 139.652165556, mrkId: ZDC.MARKER_COLOR_ID_YELLOW_S}, {name: '千葉県庁', lat: 35.601798611, lon: 140.126571111, mrkId: ZDC.MARKER_COLOR_ID_GREEN_S}, {name: '神奈川県庁', lat: 35.444238611, lon: 139.645565556, mrkId: ZDC.MARKER_COLOR_ID_GRAY_S} ]; function loadMap() { var centerll = new ZDC.LatLon(lat, lon); map = new ZDC.Map( document.getElementById('ZMap'), { latlon: centerll, zoom: 7, mapType: ZDC.MAPTYPE_HIGHRES_LV18 } ); map.addWidget(new ZDC.ScaleBar()); map.addWidget(new ZDC.Control()); /* 吹き出しを作成 */ msg = new ZDC.MsgInfo( centerll, {offset: ZDC.Pixel(0, -18)} ); /* 吹き出しを追加 */ map.addWidget(msg); for (var i = 0, l = ary.length; i < l; i++) { var obj = ary[i]; var mrkll = new ZDC.LatLon(obj.lat, obj.lon); /* マーカを作成 */ var mrk = new ZDC.Marker( mrkll, {color: obj.mrkId} ); /* マーカを追加 */ map.addWidget(mrk); /* マーカがクリックされたら そのマーカの緯度経度を吹き出しに表示する関数を実行させる */ ZDC.bind( mrk, ZDC.MARKER_MOUSEUP, {name: obj.name, latlon: mrkll, info: msg}, showInfo ); } }; /* 吹き出しを表示する */ function showInfo() { this.info.moveLatLon(this.latlon); this.info.setHtml( '<div style="font-size:80%; line-height: 1.3;"><b>' + this.name + '</b><br>' + 'N ' + deg2dms(this.latlon.lat) + '<br>' + 'E ' + deg2dms(this.latlon.lon) + '</div>' ); this.info.open(); }; /* 十進度形式から度分秒形式に変換(xx.xxxx → aa°bb′cc″) */ function deg2dms(ms) { var obj = ZDC.degTodms(ms); var dms = obj.deg+'°'+obj.min+'′'+obj.sec+'″'; return dms; }; </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>