// JScript ファイル /*--------------------------------------------------------------------------* * 2010.03 SP Hirofumi Yanagisawa * gmap.aspxで使用する地図表示スクリプト *--------------------------------------------------------------------------*/ //満空アイコン var icon_mansya = null; var icon_kuusya = null; var icon_konzatu = null; var icon_teishi = null; var loadFlag = null; //地図表示タイマー var timerTimeout = 500; var timerId = null; //地図表示 var map = null; var geocoder = null; function gmapLoad() { // 使用しているブラウザがGoogleマップに対応しているかを判定 if (GBrowserIsCompatible) { // 「id="gmap"」で定義された領域に地図を表示 //（ナビゲーションや表示位置、種類を定義） map = new GMap2($get('ctl00_ContentPlaceHolderLeft_gmapview')); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); // GClientGeocoderを初期化 geocoder = new GClientGeocoder(); //アイコン初期化 icon_mansya = new GIcon(); icon_mansya.image = "img/gmap/p02.png"; icon_mansya.iconAnchor = new GPoint(8,8); icon_mansya.infoWindowAnchor = new GPoint(8,1); icon_mansya.iconSize = new GSize(16,16); icon_kuusya = new GIcon(); icon_kuusya.image = "img/gmap/p00.png"; icon_kuusya.iconAnchor = new GPoint(8,8); icon_kuusya.infoWindowAnchor = new GPoint(8,1); icon_kuusya.iconSize = new GSize(16,16); icon_konzatu = new GIcon(); icon_konzatu.image = "img/gmap/p01.png"; icon_konzatu.iconAnchor = new GPoint(8,8); icon_konzatu.infoWindowAnchor = new GPoint(8,1); icon_konzatu.iconSize = new GSize(16,16); icon_teishi = new GIcon(); icon_teishi.image = "img/gmap/point.png"; icon_teishi.iconAnchor = new GPoint(6,6); icon_teishi.infoWindowAnchor = new GPoint(6,1); icon_teishi.iconSize = new GSize(12,12); //イベント設定 GEvent.addListener(map, "dragend", function() { if(timerId != null) { clearTimeout(timerId); } timerId = setTimeout(ShowMapByTimer, timerTimeout); }); GEvent.addListener(map, "zoomend", function(oldLevel,newLevel) { if(timerId != null) { clearTimeout(timerId); } timerId = setTimeout(ShowMapByTimer, timerTimeout); }); //初期表示 var pointA = new GLatLng(35.681382, 139.766084); map.setCenter(pointA, 14);//縮小13→15拡大 map.setMapType(G_NORMAL_MAP); map.enableScrollWheelZoom();//ホイールによるスクロール gmapMove(); // リストボックスの内容が変更されたタイミングで、 // サービス・メソッドを呼び出し $addHandler( $get('ctl00_ContentPlaceHolderLeft_DropDownListKen'), 'change', shikuLoad ); } } //座標指定による表示（周辺駐車場検索） function ShowMapByIdoKeido(ido,keido) { //タイマー停止 if(timerId != null) { clearTimeout(timerId); timerId = null; } //地図表示 var pointA = new GLatLng(ido,keido); ShowMapAndList(pointA); //alert("周辺駐車場検索" + ido.toString() + keido.toString()); } //タイマーによる表示 function ShowMapByTimer() { var point1 = map.getCenter(); ShowMapAndList(point1); timerId = null; //alert("タイムアウト処理確認"); } //地図表示 function gmapMove() { //地名取得 var index1 = $get('ctl00_ContentPlaceHolderLeft_DropDownListKen').selectedIndex var index2 = $get('ctl00_ContentPlaceHolderLeft_DropDownListShiku').selectedIndex var address = $get('ctl00_ContentPlaceHolderLeft_DropDownListKen')[index1].text; address = address + $get('ctl00_ContentPlaceHolderLeft_DropDownListShiku')[index2].text; //小笠原村が都庁の座標になる不具合対応 if(address == '東京都小笠原村') { address = '小笠原村'; } if (geocoder) { //座標取得 geocoder.getLatLng( address, function(point) { //地図に表示 ShowMapAndList(point); //表示位置を保存 map.savePosition(); } ); } } //駐車場リストと地図上のアイコン表示 function ShowMapAndList(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, map.getZoom()); //初期ロードチェック if(loadFlag != 1) { //初期ロード時は駐車場リストとアイコンを表示しない。 loadFlag = 1; return; } var center = map.getCenter(); var bounds=map.getBounds(); var ne=bounds.getNorthEast(); var sw=bounds.getSouthWest(); //submitpos(center.lat(),center.lng(),ne.lat(),ne.lng(),sw.lat(),sw.lng()); GoogleMap.GetParkList( center.lat(), center.lng(), ne.lat(), ne.lng(), sw.lat(), sw.lng(), function(DbParkList) { //駐車場リストを表示 //alert('駐車場数' + DbParkList.length); //alert(document.getElementById('GMapParkList')); var parkList = $get('GMapParkList'); //リストデータクリア while(0 < parkList.rows.length) { parkList.deleteRow(0); } map.clearOverlays(); //データなしの場合 if((DbParkList.length == 0) || (DbParkList[0] == null)) { var row1 = parkList.insertRow(0); // 行を追加 var cell1 = row1.insertCell(0); // 一つ目のセルを追加 row1.style.backgroundColor = '#F5FFFA'; row1.style.cursor = 'default'; 　　　　　　　　　　cell1.style.width = '275px'; 　　　　　　　　　　cell1.style.borderWidth = '0px'; cell1.align='center'; cell1.style.cursor = 'default'; cell1.innerHTML = '駐車場がありません'; return; } //データありの場合 for(i = 0;i < DbParkList.length; i++) { var iconSrc = null; var iconMK = null; var iconAlt= null; var iconHensu = null; var markerUrl = null; var markerText = null; //最大件数表示。それ以上は表示しない。（App_Code/GoogleMap.vb内にもあり） if(i >= 300){ var row1 = parkList.insertRow(i); // 行を追加 var cell1 = row1.insertCell(0); // 一つ目のセルを追加 var cell2 = row1.insertCell(1); // 二つ目のセルを追加 var cell3 = row1.insertCell(2); // 三つ目のセルを追加 row1.style.backgroundColor = '#F5FFFA'; row1.style.cursor = 'default'; 　　　　　　　　　　 cell1.style.borderWidth = '0px'; 　　　　　　　　　　 cell2.style.borderWidth = '0px'; 　　　　　　　　　　 cell3.style.borderWidth = '0px'; cell1.align='center'; cell2.align='center'; cell3.align='center'; cell1.style.cursor = 'default'; cell2.style.cursor = 'default'; cell3.style.cursor = 'default'; var iCount = i - 1; cell2.innerHTML = '最大表示 ' + i + ' 駐車場に達しました'; break; } var row1 = parkList.insertRow(i); // 行を追加 var cell1 = row1.insertCell(0); // 一つ目のセルを追加 var cell2 = row1.insertCell(1); // 二つ目のセルを追加 var cell3 = row1.insertCell(2); // 三つ目のセルを追加 row1.id = 'parkList_r' + i; // 行を追加 cell1.id = 'parklist_cMK_' + i; cell2.id = 'parklist_cName_' + i; cell3.id = 'parklist_cMap_' + i; cell1.align='left'; cell2.align='left'; cell3.align='center'; cell1.width=26; cell2.width=210; cell3.width=20; row1.style.backgroundColor = '#F5FFFA'; row1.style.cursor = 'default'; cell1.style.cursor = 'pointer'; cell2.style.cursor = 'default'; cell3.style.cursor = 'pointer'; 　　　　　　　　　　cell1.style.borderWidth = '0px'; 　　　　　　　　　　cell2.style.borderWidth = '0px'; 　　　　　　　　　　cell3.style.borderWidth = '0px'; //満空アイコン決定 if (DbParkList[i].strManku == '0') { iconSrc = 'img/gmap/p00.png'; iconMK = icon_kuusya; iconAlt = '空車'; iconColor = 'Green'; iconHensu = 'icon_kuusya'; } else if(DbParkList[i].strManku == '1') { iconSrc = 'img/gmap/p01.png'; iconMK = icon_konzatu; iconAlt = '混雑'; iconColor = 'Olive'; iconHensu = 'icon_konzatu'; } else if(DbParkList[i].strManku == '2') { iconSrc = 'img/gmap/p02.png'; iconMK = icon_mansya; iconAlt = '満車'; iconColor = 'Red'; iconHensu = 'icon_mansya'; } // else if(DbParkList[i].strManku == '4') // { // iconSrc = 'img/gmap/p03.png'; // iconMK = icon_teishi; // iconAlt = '閉鎖'; // iconColor = 'Black'; // iconHensu = 'icon_teishi'; // } else { iconSrc = 'img/gmap/point.png'; iconMK = icon_teishi; iconAlt = ''; iconColor = 'Black'; iconHensu = 'icon_teishi'; } cell1.style.color = iconColor; cell1.innerHTML = iconAlt; markerUrl = 'detailpop.aspx?id=' + DbParkList[i].strParingId; //IEはwindow.openの第二引数に記号があるとウインドウが開かないため、DbParkList[i].strNameから「駐車場詳細」に修正した cell2.innerHTML = '' + DbParkList[i].strName + ''; //cell2.innerHTML = '' + DbParkList[i].strName + ''; //cell3.innerHTML = ''; cell3.innerHTML = ''; markerText = '' + iconAlt + '　' + DbParkList[i].strName + '
' + '駐車場詳細'; //markerText = '' + iconAlt + '　' + DbParkList[i].strName + '
' + // '駐車場詳細'; //イベント設定 startEvent(getLayOjStr(row1.id),'mouseover','function(){this.style.backgroundColor=\'#CCFFCC\';}'); startEvent(getLayOjStr(row1.id),'mouseout', 'function(){this.style.backgroundColor=\'#F5FFFA\';}'); startEvent(getLayOjStr(cell1.id),'click', 'function(){ShowBalloon(' + DbParkList[i].strLatWGS84 + ', ' + DbParkList[i].strLonWGS84 + ',\'' + DbParkList[i].strName + '\'' + ',\'' + DbParkList[i].strParingId + '\'' + ',\'' + DbParkList[i].strManku + '\');}'); startEvent(getLayOjStr(cell3.id),'click', 'function(){ShowBalloon(' + DbParkList[i].strLatWGS84 + ', ' + DbParkList[i].strLonWGS84 + ',\'' + DbParkList[i].strName + '\'' + ',\'' + DbParkList[i].strParingId + '\'' + ',\'' + DbParkList[i].strManku + '\');}'); //地図に表示 AddMarker(DbParkList[i].strLatWGS84, DbParkList[i].strLonWGS84, DbParkList[i].strName, DbParkList[i].strParingId, iconMK, markerText); } } ); } } function AddMarker(lat,lng,name,term_id,manku,markerHtml) { var mp = new GLatLng(lat,lng); var mopts = new Object(); mopts.icon = manku; mopts.title = name; var marker = new GMarker(mp, mopts); map.addOverlay(marker); // マーカをクリックした場合に、詳細ページを表示 GEvent.addListener( marker, 'click', function(){ marker.openInfoWindowHtml(markerHtml); // window.open(markerHtml, name, 'width=700,height=520,status=yes,scrollbars=yes,directories=no,menubar=no,resizable=no,toolbar=no,location=no'); //第三引数には他に次の値も指定可能 //19 width=400 ウィンドウの幅 //20 height=200 ウィンドウの高さ //21 status=yes|no ステータスバーの表示 //22 scrollbars=yes|no スクロールバーの表示 //23 directories=yes|no ユーザツールバーの表示 //24 menubar=yes|no メニューバーの表示 //25 resizable=yes|no リサイズ可能かどうか //26 toolbar=yes|no ツールバーの表示 } ); } function ShowBalloon(lat,lng,name,term_id,strManku) { var iconSrc = null; var iconMK = null; var iconAlt= null; var iconHensu = null; var markerUrl = null; var markerHtml = null; var mp = new GLatLng(lat,lng); var mopts = new Object(); //満空アイコン決定 if (strManku == '0') { iconSrc = 'img/gmap/p00.png'; iconMK = icon_kuusya; iconAlt = '空車'; iconColor = 'Green'; iconHensu = 'icon_kuusya'; } else if(strManku == '1') { iconSrc = 'img/gmap/p01.png'; iconMK = icon_konzatu; iconAlt = '混雑'; iconColor = 'Olive'; iconHensu = 'icon_konzatu'; } else if(strManku == '2') { iconSrc = 'img/gmap/p02.png'; iconMK = icon_mansya; iconAlt = '満車'; iconColor = 'Red'; iconHensu = 'icon_mansya'; } // else if(strManku == '4') // { // iconSrc = 'img/gmap/p03.png'; // iconMK = icon_teishi; // iconAlt = '閉鎖'; // iconColor = 'Black'; // iconHensu = 'icon_teishi'; // } else { iconSrc = 'img/gmap/point.png'; iconMK = icon_teishi; iconAlt = ''; iconColor = 'Black'; iconHensu = 'icon_teishi'; } markerUrl = 'detailpop.aspx?id=' + term_id; var markerHtml = '' + iconAlt + '　' + name + '
' + '駐車場詳細'; mopts.icon = iconMK; mopts.title = name; var marker = new GMarker(mp, mopts); map.addOverlay(marker); marker.openInfoWindowHtml(markerHtml); } //駐車場リスト表示 function ShowParkingList(CenterLat,CenterLng,NorthEastLat,NorthEastLng,SouthWestLat,SouthWestLng) { var fg = document.gmap; var fon = document.onmap; fg.clat.value = clat; fg.clng.value = clng; fg.nelat.value = nelat; fg.nelng.value = nelng; fg.swlat.value = swlat; fg.swlng.value = swlng; fg.flag.value = fon.flag.checked; fg.zoom.value = map.getZoom(); fg.submit(); } //市区町村リスト読み込み function shikuLoad() { var index = $get('ctl00_ContentPlaceHolderLeft_DropDownListKen').selectedIndex; var kenCode = $get('ctl00_ContentPlaceHolderLeft_DropDownListKen').value; //市区町村リスト読み込み GoogleMap.GetShikuList( kenCode,//都道府県件コード function(result) { //市区町村データ格納 var sObj = $get('ctl00_ContentPlaceHolderLeft_DropDownListShiku'); //リストデータクリア // while(0 < sObj.length) // { // sObj.remove(0); // } //リストデータ一発クリア sObj.length = 0; //リストに追加 // for(i = 0;i < result.length; i++) // { // sObj.options[i] = new Option(result[i].strName,result[i].strCode); // } //一番したがデフォルトで選択されることがあったので、逆から追加。 for(i = result.length - 1;i >= 0; i--) { sObj.options[i] = new Option(result[i].strName,result[i].strCode); } } ); } //==================================================================== // jsライブラリ // イベント関連 jslb_event.js // // // 2005/03/30 ( Use Free 商用利用も自由です ) //-------------------------------------------------------------------- //--イベントキャプチャ開始関数 // 書式 startEvent('対象オブジェクト名','イベントタイプ名','動作する関数') // 例 startEvent("document.getElementById('test')","click","doFunc") // http://allabout.co.jp/career/javascript/closeup/CU20030920/index.htm //--イベントキャプチャ停止関数 // 書式 stopEvent('対象オブジェクト名','イベントタイプ名') // 例 stopEvent("document","mousemove") // http://allabout.co.jp/career/javascript/closeup/CU20030922/index.htm //--対象オブジェクト名を取得 // 書式 getLayOjStr(id名) // 例 testojstr = getLayOjStr("test") // 戻値 対象オブジェクトのdocument以下の名前 // (例 "document.getElementById('test')"や"document.layers['test'])" // http://jsgt.org/mt/archives/01/000186.html //-------------------------------------------------------------------- // Toshirou Takahashi/サポート http://jsgt.org/mt/01/ //-------------------------------------------------------------------- /* 使用例: ページ読み込み時にid="test"のDIVへonclickイベントを追加する
test
*/ //-------------------------------------------------------------------- //--イベント開始関数 function startEvent(ojNameStr,eventTypeNameStr,funcNameStr){ //n4,m1,n7,e4,e5,e6,o6,o7,s1,k3用 eval(ojNameStr+'.on'+eventTypeNameStr+'='+ funcNameStr); //n4用 if(document.layers) eval(ojNameStr+'.captureEvents(Event.' +eventTypeNameStr.toUpperCase()+')'); } //--イベント停止関数 function stopEvent(ojNameStr,eventNameStr){ //n4,m1,n7,e4,e5,e6,o6,07,s1,k3用 eval(ojNameStr+'.on'+eventNameStr+' = null'); //n4用 if(document.layers) eval(ojNameStr+'.releaseEvents(Event.' +eventNameStr.toUpperCase()+')'); } //--対象オブジェクト名を取得 // (必ずonload後に実行すること) function getLayOjStr(idName){ if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用 return 'document.getElementById(\''+idName+'\')'; else if(document.all) //e4用 return 'document.all(\''+idName+'\')'; else if(document.layers) //n4用 return 'document.layers[\''+idName+'\']'; } //--------------------------------------------------------------------