前回の記事(Google Maps APIで右クリックメニューを作成)では単純に右クリックを表示して、ズームレベルを設定するだけだったが、それを本家のGoogleマップっぽくカスタマイズしてみた。
「ここを地図の中心」機能を追加するためには、クリック位置を動的にメニュー内に返さないといけないので、rmenu.innerHTML = "〜"
をイベントハンドラー内へ移動。
単純な流れは
-
GEvent.addListener(map, "singlerightclick", function(point) {〜}
のpointがクリック地点(ピクセル:X座標、Y座標)。 - それを緯度・経度に変換して変数に格納。
<a href="javascript:map.panTo(変数)>ここを地図の中心</a>
クリック地点の変数をグローバルで宣言して、function map_center(){〜}
→メニュー項目に<a href="javascript:map_center()">ここを地図の中心</a>
のように一つ一つ貼り付けてもいいんだろうが、こっちの方がメモリーも食わないと思う(多分)・・・。
あとマップからマウスフォーカスが外れたらメニューを非表示にするようにGEvent.addListener(map, "mouseout", function(point) {〜 }});
も加えてみた。
//地図のサイズを取得 var MapPX = map.getSize(); //右クリックメニューを作成 var rmenu = document.createElement("div"); //右クリックメニューのスタイル //CSSで定義したい場合は、rmenu.setAttribude("id","〜任意のid名") rmenu.style.visibility = "hidden"; rmenu.style.backgroundColor = "white"; rmenu.style.border = "2px solid #ececec"; rmenu.style.padding = "2px"; rmenu.style.fontSize = "12px"; rmenu.style.cursor = "pointer"; rmenu.style.color = "#7176bf"; //右クリックメニューをmap内に返す map.getContainer().appendChild(rmenu); //右クリック位置を取得してメニュー表示のイベント GEvent.addListener(map, "singlerightclick", function(point) { var rmenux = point.x; var rmenuy = point.y; if(rmenux > (MapPX.width - 160)) { rmenux = MapPX.width - 160; } if(rmenuy > (MapPX.height - 40)) { rmenuy = MapPX.height - 40; } var rmenu_pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(rmenux, rmenuy)); var rmenu_latlng = map.fromContainerPixelToLatLng(point); //右クリックメニューの内容(HTML) rmenu.innerHTML = "<a href='javascript:map.zoomIn();'>ズームインして詳細を表示</a><br />" + "<a href='javascript:map.zoomOut();'>ズームアウトして広域を表示</a><br />" + "<a href='javascript:map.panTo(new GLatLng" + rmenu_latlng + ");'>ここを地図の中心</a>" rmenu_pos.apply(rmenu); rmenu.style.visibility = "visible"; }); GEvent.addListener(map, "click", function() { if (rmenu.style.visibility == "visible"){ rmenu.style.visibility = "hidden"; } }); //マップからフォーカスが外れたらメニューを非表示 GEvent.addListener(map, "mouseout", function() { if (rmenu.style.visibility == "visible"){ rmenu.style.visibility = "hidden"; } });
<a href= http://crdet-cood.cn/mastercard-discover-credit-best.html >best credit card to get visa mastercard discover</a>
<a href= http://caredit-cood.cn/discover-transfer-percent-card.html >discover card 0 percent apr transfer</a>