地図上に図形やアイコンを表示する¶
概要¶
フォームなどで検索した結果複数地点がヒットした場合、地図上に結果を表示することでユーザーに対して効果的に結果を表示することができます。さらに、地点をクリックした場合により詳細な情報を表示することが出来ればユーザーと地図のインタラクションが可能となります。この項目では画面に図形やアイコンを表示し管理する方法と、イベントを関連付ける方法について解説します。
オーバーレイは、地図上に多角形など任意の形状を外観をカスタマイズして表示させることができる機能です。経度・緯度や、メートルで指定できる描画範囲はズームによって自動計算されて再描画されるよう制御されるので、地図に接近すれば画面上の円も自動で拡大されます。
navitime.geo.overlay ネームスペース以下に定義された Pin, InfoWindow, Polyline , Polygon , Circle クラスは地図上への配置方法・削除方法が共通しています。以下に配置・削除方法を例示しますが、それぞれの説明では共通化された操作方法については説明が割愛されています。
- 描画
- コンストラクタを利用してオブジェクトのインスタンスを生成する際、表示対象の地図インスタンスを map プロパティの値として渡してください。また、オブジェクトを生成した後に地図インスタンスをセットする( setMap(map) )方法でも描画できます。
- 削除
- setMap(null) …地図上からオブジェクトを削除します。見た目上は setVisible(false) と変わりませんが、全ての関連イベントを地図から切り離す処理が行われるため、高コストです。完全にオブジェクトが必要なくなった場合に使用してください。
- 見た目の変更
- オブジェクトには生成時の options で指定した各プロパティを変更することができます。 options とは例えば Pin(API) のコンストラクタに渡す引数のオブジェクトで、見栄えや動きを制御するための設定値です。すべての設定値(=プロパティ)には set で始まるセッタメソッドがあり、設定し直された時点で地図上の表示にすぐに反映されます。他にも setOptions() メソッドで一括設定が可能ですが、ここに渡されるオブジェクトは先に設定されているプロパティを全て設定し直します。値の設定されていないプロパティは undefined が設定され、オブジェクトに即座に反映されます。
- 表示/非表示
- setVisible(boolean) …真偽値を渡すことで描画された線を地図上から除くことができます。オーバーレイには getVisible() メソッドが提供されており、可視性を取得することが
背景・境界色の指定方法は W3Cのドキュメント 上で定義されている Color name , Hex rgb , Decimal 形式が使用可能です。
Warning
5行目の<meta>タグは、当スクリプトを使用する際にInternet Explorerの過去のバージョンとの互換性を保証する為の記述です。詳細については meta_ie8 を参照して下さい。
アイコンを描画・削除する¶
<サンプルソース>
<!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 tocho = new navitime.geo.LatLng('35.689614', '139.691634');
var shin_okubo = new navitime.geo.LatLng('35.701429', '139.700003');
var map = new navitime.geo.Map('map', tocho, 14);
//動くピン
draggablePin = new navitime.geo.overlay.Pin({
icon:'pin.png',
position:tocho,
draggable:true,
map:map,
title:'東京都庁'
});
//動かないピン
var staticPin = new navitime.geo.overlay.Pin({
icon:'pin.png',
position:shin_okubo,
draggable:false,
map:map,
title:'新大久保'
});
}
//ピンの切り替え
function switchPin() {
draggablePin.setVisible(!draggablePin.getVisible());
}
</script>
</head>
<body onload="init()">
<div id="map" style="height:500px; width:800px"></div>
<input type="button" value="ピン(表示/非表示)" onclick="switchPin()"/>
</body>
</html>
|
サンプル地図上では2つのPinを配置しています。どちらもマウスカーソルを合わせるとピンオブジェクトに設定された地名が表示されます。都庁上に配置してあるピンにはドラッガブルな属性を付けてあります。
ControlPosition(API) オブジェクトは、 navitime.geo.overlay.Pin コンストラクタの iconPosition プロパティに対応する定数クラスです。デフォルトではアイコンの下( navitime.geo.ControlPosition.BOTTOM )に対応しています。
吹き出しを描画・削除する¶
<サンプルソース>
<!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 tocho = new navitime.geo.LatLng('35.689614', '139.691634');
var shinjuku = new navitime.geo.LatLng('35.690485', '139.700475');
var map = new navitime.geo.Map('map', tocho, 14);
//吹き出し1(DOMをセット)
infoWindow1 = new navitime.geo.overlay.InfoWindow({
map:map,
position:tocho,
content:createInfo()
});
//吹き出し2（テキストでセット)
var infoWindow2 = new navitime.geo.overlay.InfoWindow({
map:map,
position:shinjuku,
content:'新宿駅<br/>東京都新宿区新宿三丁目38-1'
});
}
function createInfo() {
var info = document.createElement('div');
var info_title = document.createElement('p');
info_title.innerHTML='東京都庁';
var info_image = document.createElement('img');
info_image.src='mail.gif';
var info_text = document.createElement('span');
info_text.onclick=function(){alert('メール')};
var info_text_href = document.createElement('a');
info_text_href.innerHTML='この場所をメールで送る';
info_text_href.href='javascript:void(0);';
info_text.appendChild(info_text_href);
info.appendChild(info_title);
info.appendChild(info_image);
info.appendChild(info_text);
return info;
}
//吹き出しの切り替え
function switchInfoWindow() {
infoWindow1.setVisible(!infoWindow1.getVisible());
}
</script>
</head>
<body onload="init()">
<div id="map" style="height:500px; width:800px"></div>
<input type="button" value="吹き出し(表示/非表示)" onclick="switchInfoWindow()"/>
</body>
</html>
|
InfoWindow(API) のサンプルでは吹き出しの表示を行なっています。他のオブジェクトとの違いは、吹き出しのコンテンツを設定できるという点です。コンテンツは非常に柔軟に設定でき、文字列でもDOMでも設定が可能です。吹き出しの大きさは設定する内容に応じて十分な大きさまで拡大されます。サンプルではDOM要素をJavaScriptで構築して吹き出しに設定しています。
なお、吹き出しの中身は例のようにある程度のカスタマイズが可能ですが、現対応時点( 2018/08/09 )では吹き出しそのもののカスタマイズはできません。
多角線を描画・削除する¶
<サンプルソース>
<!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 tocho = new navitime.geo.LatLng('35.689614', '139.691634');
var shinjuku = new navitime.geo.LatLng('35.690485', '139.700475');
var yoyogi = new navitime.geo.LatLng('35.684699', '139.701805');
var hatsudai = new navitime.geo.LatLng('35.681492', '139.68627');
var map = new navitime.geo.Map('map', tocho, 14);
//多角線
polyline = new navitime.geo.overlay.Polyline({
map:map,
path: [tocho, shinjuku, yoyogi, hatsudai],
strokeColor: '#006400',
strokeOpacity: 0.8,
strokeWeight: 4,
zIndex: 999
});
}
//多角線の切り替え
function switchPolyline() {
polyline.setVisible(!polyline.getVisible());
}
</script>
</head>
<body onload="init()">
<div id="map" style="height:500px; width:800px"></div>
<input type="button" value="都庁→新宿→代々木→初台(表示/非表示)" onclick="switchPolyline()"/>
</body>
</html>
|
サンプル地図上では、「都庁→新宿→代々木→初台(表示/非表示)」ボタンを繰り返しクリックすることで多角線の表示・非表示方法を試すことができます。
多角線を生成するためには、点の配列を順番に繋ぐ必要があります。点（＝配列の要素）は navitime.geo.LatLng で表現されている必要があり、これを配列として Poyline(API) クラスのコンストラクタに渡すことで多角線インスタンスが生成されます。
外観をカスタマイズする詳細は Poyline(API) を参照してください。
多角形を描画・削除する¶
<サンプルソース>
<!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 tocho = new navitime.geo.LatLng('35.680237', '139.723434');
var sendagaya = new navitime.geo.LatLng('35.681631', '139.71056');
var yotsuya = new navitime.geo.LatLng('35.686163', '139.730301');
var aoyama_1chome = new navitime.geo.LatLng('35.673265', '139.724035');
var map = new navitime.geo.Map('map', tocho, 14);
//多角形
polygon = new navitime.geo.overlay.Polygon({
map:map,
paths : [sendagaya, yotsuya, aoyama_1chome],
fillColor: '#006400',
fillOpacity: 0.2,
strokeColor: '#006400',
strokeOpacity: 0.8,
strokeWeight: 2
});
}
//多角形の切り替え
function switchPolygon() {
polygon.setVisible(!polygon.getVisible());
}
</script>
</head>
<body onload="init()">
<div id="map" style="height:500px; width:800px"></div>
<input type="button" value="千駄ヶ谷・四ツ谷・青山一丁目を結ぶポリゴン(表示/非表示)" onclick="switchPolygon()"/>
</body>
</html>
|
サンプル地図上では、「千駄ヶ谷・四ツ谷・青山一丁目を結ぶポリゴン(表示/非表示)」ボタンを繰り返しクリックすることで多角形の表示・非表示方法を試すことができます。
多角形を生成する手順の各辺を作成する手順は polyline と類似しており、外観の設定方法は circle と似ています。 多角形の辺を生成する過程では、 LatLng(API) の配列を渡して地点をつなぎます。外観をカスタマイズする詳細は Polygon(API) を参照してください。
円を描画・削除する¶
<サンプルソース>
<!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 tocho = new navitime.geo.LatLng('35.690067', '139.684296');
var shin_okubo = new navitime.geo.LatLng('35.701429', '139.700003');
var map = new navitime.geo.Map('map', tocho, 14);
//円
circle = new navitime.geo.overlay.Circle({
center: shin_okubo,
fillColor: '#006400',
fillOpacity: 0.2,
radius: 500,
strokeColor: '#006400',
strokeOpacity: 0.8,
strokeWeight: 2,
map:map
});
}
//円切り替え
function switchCircle() {
circle.setVisible(!circle.getVisible());
}
</script>
</head>
<body onload="init()">
<div id="map" style="height:500px; width:800px"></div>
<input type="button" value="新大久保を中心とした円(表示/非表示)" onclick="switchCircle()"/>
</body>
</html>
|
サンプル地図上では、「新大久保を中心とした円(表示/非表示)」ボタンを繰り返しクリックすることで円の表示・非表示方法を試すことができます。
円を表示するためには中心点と半径(m)を設定します。中心点は LatLng(API) で表現されている必要があり、これを navitime.geo.overlay.Circle クラスのコンストラクタに渡すことで円が生成されます。サンプルでは、新大久保を中心とする半径500mの円描画します。 navitime.geo.overlay.Circle の外観をカスタマイズする詳細は Circle(API) を参照してください。