地図コンテキストメニューメニューを使用する¶
コンテキストメニューを使うことで、地図とユーザー操作の間により密なインタラクションを実現することができます。本スクリプトのメニューAPIは、クリックイベントから地点情報( 位置情報(navitime.geo.LatLng) )を取得することができるため、クリックした場所の地理情報を生かした直感的なコンテキストメニューを地図上に組み込むことができます。リファレンスは MenuControl(API) を参照してください。
Contents
メニューの生成方法¶
<サンプルソース>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メニューサンプル</title>
<script charset="UTF-8" src="https://{HOST}/{CID}/v1/map_script?host={example.com}&signature={XXXXXXXXX}&request_code={YYYYYYYYY}"></script>
<script>
function init() {
//都庁
// 緯度・経度にdegree形式を利用する場合は必ず、シングルコーテーションで囲む
// 通常はmillisec形式を推奨
var map = new navitime.geo.Map('map', new navitime.geo.LatLng('35.689614', '139.691634'), 15);
//クリックした場所を地図の中心にするコンテキストメニューの作成
var menu = new navitime.geo.control.MenuControl();
menu.addMenuColumn('この位置を中心にする', function() {
map.panTo(menu.getLatLng());
});
//中身をDOMで設定するメニュー
menu.addMenuColumn(createMailDiv(), function() {
alert('メール');
});
menu.setMap(map);
}
//DOMの生成
var createMailDiv = function() {
var mailDiv = document.createElement('div');
mailImg = document.createElement('img')
mailImg.src ='mail.gif';
mailImg.className = 'imgWithText';
var mailText = document.createElement('span');
mailText.className='textWithImg';
mailText.innerHTML='この場所をメールで送信';
mailDiv.appendChild(mailImg);
mailDiv.appendChild(mailText);
return mailDiv;
}
</script>
</head>
<body onload="init()">
<div id="map" style="height:500px; width:800px"></div>
地図を右クリックして、表示されたメニューを選択してください。
</body>
</html>
|
メニューを設定するために、 MenuControl(API) の addMenu() メソッドを使用します。コンストラクタではコンテキストメニューに設定するテキストまたはDOMと、メニュークリック時のイベントハンドラを設定することができます。イベントハンドラ内では menu.getLatLng() を使用してコンテキストメニューを表示する際にクリックした地点の緯度経度を取得できます。