はじめに
Google Maps（Google Local）のAPIを利用する方法を簡単に紹介しています。今回 は「地図の中に複数の線を自由に描く方法について」です。スクリプトの変更
前回に作成したコードの線の描画に関するオブジェクト を全て配列化し、さらに線の追加処理などを加えています。このくらい高機能化してくるとコードが長くなってしまい、さすがに掲載するのに限界を感じてしま いますが...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
v\:*
{
behavior:url(#default#VML);
}
</style>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAJ2A-EncISppmZHF0oZq2MxSIqVgmEE7Z7jvRqG49DJtM7mV-6xQVluTrLna8DIEesDPeKpUSnejCaA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<form name=form_lines><select name=select_line onChange="LineChange();" >
<option value=0 selected>線 1</option>
</select>
<input type=button value='新規追加' id=button_back onclick="LineNew()">
</form>
<table><tr><td>
<div id="label_test" style="width: 400px; height: 200px; overflow: scroll; padding: 3px; background-color: white; border: 1px solid black;"></div>
</td><td>
<input type=button value='戻る' id=button_back onclick="LineBack()">
<br><form name=line_param>
色<input type=text name=text_color><br>
太さ<input type=text name=text_weight><br>
透明度<input type=text name=text_opacity><br>
<input type=button value='再描画' id=button_refresh onclick="LineRefresh()">
</form>
</td></tr>
</table>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
_map = map;
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(135.3659722, 34.72072222), 1);
_aobjLine = new Array(0);
_aaobjPoints = new Array(1);
_aaobjPoints[0] = new Array(0);
_astrLineColor = new Array(1);
_astrLineColor[0] = "#FF0000";
_anLineWeight = new Array(1);
_anLineWeight[0] = 5;
_anLineOpacty = new Array(1);
_anLineOpacty[0] = 0.4;
LineChange();
function GetCurrentLineNo()
{
return document.form_lines.select_line.options[document.form_lines.select_line.selectedIndex].value;
}
function LineRefresh()
{
var map = _map;
var nIndex = GetCurrentLineNo();
if(nIndex == _aobjLine.length)
{
_aobjLine.length++;
_aobjLine[_aobjLine.length - 1] = null;
_aaobjPoints.length++;
_aaobjPoints[_aaobjPoints.length -1] = new Array(0);
}
_astrLineColor[nIndex] = document.line_param.text_color.value;
_anLineWeight[nIndex] = document.line_param.text_weight.value;
_anLineOpacty[nIndex] = document.line_param.text_opacity.value;
if(_aobjLine[nIndex])
map.removeOverlay(_aobjLine[nIndex]);
_aobjLine[nIndex] = new GPolyline(_aaobjPoints[nIndex],document.line_param.text_color.value,document.line_param.text_weight.value,document.line_param.text_opacity.value);
map.addOverlay(_aobjLine[nIndex]);
}
function LineBack()
{
var nIndex = GetCurrentLineNo();
if(_aaobjPoints[nIndex].length > 0)
_aaobjPoints[nIndex].length--;
LineRefresh();
var strData = "";
for(i = 0; i < _aaobjPoints[nIndex].length; i++)
strData += _aaobjPoints[nIndex][i].x + ',' + _aaobjPoints[nIndex][i].y + "<br>";
document.getElementById("label_test").innerHTML = strData;
}
function LineChange()
{
var nIndex = GetCurrentLineNo();
document.line_param.text_color.value = _astrLineColor[nIndex];
document.line_param.text_weight.value = _anLineWeight[nIndex];
document.line_param.text_opacity.value = _anLineOpacty[nIndex];
var strData = "";
for(i = 0; i < _aaobjPoints[nIndex].length; i++)
strData += _aaobjPoints[nIndex][i].x + ',' + _aaobjPoints[nIndex][i].y + "<br>";
document.getElementById("label_test").innerHTML = strData;
}
function LineNew()
{
var nIndex = document.form_lines.select_line.options.length;
document.form_lines.select_line.options.length++;
document.form_lines.select_line.options[nIndex].value = nIndex;
document.form_lines.select_line.options[nIndex].text = "線 " + document.form_lines.select_line.options.length;
_astrLineColor.length++;
_astrLineColor[nIndex] = "#FF0000";
_anLineWeight.length++;
_anLineWeight[nIndex] = 5;
_anLineOpacty.length++;
_anLineOpacty[nIndex] = 0.4;
}
GEvent.addListener(map, 'click', function(objOverlay, objPoint)
{
if(objPoint)
{
var nIndex = GetCurrentLineNo();
_aaobjPoints[nIndex].length++;
_aaobjPoints[nIndex][_aaobjPoints[nIndex].length - 1] = new GPoint(objPoint.x,objPoint.y);
LineRefresh();
document.getElementById("label_test").innerHTML += objPoint.x + ',' + objPoint.y + "<br>";
}
});
//]]>
</script>
</body>
</html>
太字の部分はAPI Keyです（人それぞれ異なる値です）。実行
実際に動かして地図の中を2回以上クリックすると線を描くことができます。「新規追加」ボタンを 押すと、リストボックスに「線 2」などが追加され、新しい線が描けるようになります。解説
コードがちょっと複雑なので簡単に説明を入れておきます。_aobjLineは線を意味するオブジェクトを格納するための配列。複数の座標を含む1つの線自体が 格納されます。
_aaobjPointsは線が含む座標点を格納するための二次元配列。1本の線が複数の座標を含むため、 二次元になっています。
_aobjLine = new Array(0);
_aaobjPoints = new Array(1);
_aaobjPoints[0] = new Array(0);
線に関するパラメータを格納する配列の初期化と標準状態の線のパラメータを代入。
_astrLineColorや_anLineWeight、_anLineOpactyはそれぞれ、線の色、線の太さ、線の透明度を 格納するための配列です。それぞれ起動時のパラメータのみを代入しています。
パラメータを代入後、LineChange関数を呼び出しています。この関数はユーザー入力用のエディ ットコントロールに現在の値を表示するための関数です。
_astrLineColor = new Array(1);
_astrLineColor[0] = "#FF0000";
_anLineWeight = new Array(1);
_anLineWeight[0] = 5;
_anLineOpacty = new Array(1);
_anLineOpacty[0] = 0.4;
LineChange();
現在選択されている線番号の取得関数。
リストボックスで選択することで線を複数描画することができます。リストボックスで現在、何が選択 されてるかを調べて返す関数です。この関数で得た値は_aobjLineや_astrLineColorや_anLineWeight、 _anLineOpactyなどの配列へのインデックスとしてそのまま利用できます。
function GetCurrentLineNo()
{
return document.form_lines.select_line.options[document.form_lines.select_line.selectedIndex].value;
}