[OpenLayers]マーカーの説明をポップアップする
OpenLayersでマーカーの説明をポップアップするサンプルです。マーカーを表示するだけではなくクリックイベントやポップアップイベントなどを追加すると利便性が向上します。
OpenLayers.jsのダウンロード
OpenLayer 2.13.1
http://openlayers.org/two/ <ダウンロード>
Zipファイルを展開後(解凍後)に使用するファイルはOpenLayers.jsとimgフォルダ、themeフォルダです。この3点があればサンプルは動作します。
サンプル
マーカーをポップアップするサンプルです。マーカーの上にカーソルを持っていくとポップアップが表示されます。
サンプルコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="OpenLayers.js"></script> <script type="text/javascript"> // 座標系の設定 var projection3857 = new OpenLayers.Projection("EPSG:3857"); var projection4326 = new OpenLayers.Projection("EPSG:4326"); var map = null; var popup = null; // ------------------------------------------------------------------------- // マップの生成 // // fx 経度(例:富士山 138.731388) ※1 // fy 緯度(例:富士山 35.362222) // izoom 表示倍率(用途にもよりますが10ぐらいが目安) // imaxZoomLevel 最大倍率(用途にもよりますが17ぐらいが目安) // // ※1 googleマップや地理院地図の検索では「緯度,経度」の順番です。 function init_map(fx,fy,izoom,imaxZoomLevel){ // マップの生成 map = new OpenLayers.Map({ div: "map", projection: projection3857, displayProjection: projection4326, }); // レイヤーの生成 map.addLayer(new OpenLayers.Layer.XYZ( "標準地図", // レイヤー名 "https://cyberjapandata.gsi.go.jp/xyz/std/${z}/${x}/${y}.png", // url { // options(attribution:帰属,,minZoomLevel:最小倍率(未使用),maxZoomLevel:最大倍率) attribution : "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>", maxZoomLevel : imaxZoomLevel, wrapDateLine : true } )); // マップの中心を設定 map.setCenter(new OpenLayers.LonLat( fx, // X:経度 fy // Y:緯度 ).transform(projection4326, projection3857),// 座標系 izoom // デフォルトズームレベル ); // マーカーリストの生成 var markers = new OpenLayers.Layer.Markers("Markers"); map.addLayer(markers); // アイコンサイズと描画位置情報(x,y) var iconsize = new OpenLayers.Size(48, 48); var point = new OpenLayers.Pixel(-(iconsize.w/2), -(iconsize.h/2)); // マーカーの追加(富士山) ※画像はご自分で用意してください。 var x = 138.730845 var y = 35.362937; var marker = new OpenLayers.Marker( new OpenLayers.LonLat(x, y).transform(projection4326, projection3857), new OpenLayers.Icon('makiba.gif', iconsize, point)) marker.tag = 'この地点は<span style="color:red;">富士山</span>です。'; marker.x = x; marker.y = y; // イベントの設定 marker.events.register('mouseover', marker, onMarkerMouseOver); marker.events.register('mouseout', marker, onMarkerMouseOut); markers.addMarker(marker); // マーカーの追加(皇居) ※画像はご自分で用意してください。 x = 139.752209; y = 35.685074; var marker = new OpenLayers.Marker( new OpenLayers.LonLat(x, y).transform(projection4326, projection3857), new OpenLayers.Icon('makiba.gif', iconsize, point)) marker.tag = 'この地点は<span style="color:red;">皇居</span>です。'; marker.x = x; marker.y = y; // イベントの設定 marker.events.register('mouseover', marker, onMarkerMouseOver); marker.events.register('mouseout', marker, onMarkerMouseOut); markers.addMarker(marker); } // マーカーイベント function onMarkerMouseOver(evt){ if (popup) map.removePopup(popup); popup = new OpenLayers.Popup.FramedCloud( "Popup", // id {String} new OpenLayers.LonLat(evt.object.x, evt.object.y).transform( projection4326, projection3857), // lonlat {OpenLayers.LonLat} null, // contentSize {OpenLayers.Size} evt.object.tag, // contentHTML {String} null, // anchor {Object} false, // closeBox {Boolean} null); // closeBoxCallback {Function} map.addPopup(popup); } function onMarkerMouseOut(evt){ if (popup) map.removePopup(popup); popup = null; } // onloadイベント window.onload = function() { // マップの生成(経度、緯度、倍率、最大倍率) init_map(138.731388,35.362222,7,18); } </script> <style type="text/css"> /* 国土地理院の出典表示用 */ body {padding: 0; margin: 0} div.olControlAttribution { padding: 3px; color:#000000; background-color:#ffffff; background-color:rgba(230,255,255,0.7); font-size:12px; line-height:14px; bottom:5px; vertical-align: middle; } </style> </head> <body> <!-- マップの表示エリア --> <div id="map" style="height: 350px; width: 100%;"></div> </body> </html>
サンプルの解説
マーカーに「marker.events.register()」でマウス系イベントを追加します。そのイベントの発生時に「OpenLayers.Popup.FramedCloud()」でポップアップを作成します。
動作環境
このサンプルは「OpenLayers2.13.1」で動作確認をしております。その他のバージョンですと動作しない場合もございますのでご了承ください。
OpenLayers関連記事
・国土地理院の地図をブログやWEBサイトで使用する
・地図に便利なコントロールを追加する1
・地図に便利なコントロールを追加する2
・複数のレイヤーを重ねてレイヤーを切り替え
・中央に十字線(センターマーカー)を表示する
・左右に切れ目のない地図を表示する
・緯度、経度、ズームレベルを取得する
・地図にマーカーを設定する
・マーカーにクリックイベントを設定する
・マーカーの説明をポップアップする
・KMLファイルを読み込む
公式リンク
・地理院タイルを用いた開発(国土地理院)
・OpenLayers2.13.1の解説(英語 -公式)
・OpenLayers2.13.1のexamples(英語 -公式)