ＧｏｏｇｌｅＭａｐで、ＡＪＡＸをつかって、クリックされたところに、線を描いて、最後、閉じるボタンが押されると、最後の点と原点を結んで閉じるというものを作ってみました（クリアボタンをクリックすると、全部初めからやり直し）。
ソースはこんなかんじ
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"＞
＜HTML xmlns="http://www.w3.org/1999/xhtml" xmlns:v =
"urn:schemas-microsoft-com:vml"＞
＜HEAD＞＜TITLE＞多角形描画テスト＜/TITLE＞
＜META http-equiv=content-type content="text/html; charset=utf-8"＞
＜script src="http://maps.google.co.jp/maps?
file=api&v=1&key=自分のGoogleMapのキーが入る" type="text/javascript"＞＜/script＞
＜SCRIPT type=text/javascript＞
//＜![CDATA[
var map;
var points = new Array();
var linecol = "#FF0000"; // 線の色
var lastclick;
//*====================================*//
//* //
//* クリックされた //
//* //
//*====================================*//
function map_click(overlay,point)
{
points.push(point);
if ( points.length ＞ 1 )
{
// 現在のをクリア
map.clearOverlays();
// 多角形作成
map.addOverlay(new GPolyline(points,linecol,6,0.5));
}
}
//*====================================*//
//* //
//* 閉じるクリック //
//* //
//*====================================*//
function end_click()
{
// エラーチェック
if ( points.length ＜ 1 )
{
alert("まだクリックされてません");
return;
}
// 原点をいれて、閉じる
points.push(points[0]);
// 現在のをクリア
map.clearOverlays();
// 多角形作成
map.addOverlay(new GPolyline(points,linecol,6,0.5));
}
//*====================================*//
//* //
//* クリアクリック //
//* //
//*====================================*//
function clear_click()
{
points = new Array();
map.clearOverlays();
}
//*====================================*//
//* //
//* 開始 //
//* //
//*====================================*//
function load()
{
if(! GBrowserIsCompatible())
{
alert("お使いのブラウザはGoogle Maps APIに対応していません");
return;
}
map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(139.732114,35.672646), 0);
map.disableDragging();
map.addControl( new GMapTypeControl() );
map.addControl( new GSmallMapControl() );
// イベントの設定
GEvent.addListener(map,"click",map_click);
}
//]]＞
＜/script＞
＜/head＞
＜body onLoad="load()" onunload="GUnload()"＞
＜DIV style="width : 500px;height : 500px" id="map"＞＜/DIV＞
＜input type=button id="end" onclick="end_click()" value="閉じる"＞
＜input type=button id="clear" onclick="clear_click()" value="クリア"＞
＜/body＞
＜/html＞
|
（上記＜ ＞は、本当は半角、「自分のGoogleMapのキーが入る」には、Google Mapで取得したキーが入る）
簡単ジャン。。。
って思いますよね。。。
１箇所をのぞいて、そうです。。。
でも、１箇所だけ、うぃりあむのいたずらがあります。
赤字のところ
xmlns:v = "urn:schemas-microsoft-com:vml"
を抜かすとエラーになり、多角形が書けません（＞＿＜！）
コレに気づくのに。。。今日一日使ったよ（；＿；！）
アクセス
トータル
ランキング
