折れ線編集の例
<!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>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAQSM2B1R_Bj95rWgWElH1OhTqjLYwwsL-iGMxhNQyjc0XqRdw2xQRl8I7RCvZ-B4St-j-iY4sNdGP3A"
type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">//<![[
var map, point=[], polyline;
/* 頂点クラス */
function pointObj(m,s,a) {
this.gmarker = m; /* gmarker */
this.isStop = s; /* if this is a stop, isStop=1, otherwise 0 */
this.active = a; /* if a =1, the point is active */
}
function onLoad() {
map = new GMap2(document.getElementById("map"));
// map.addControl(new GMapLargeMapControl());
map.addControl(new GMapTypeControl());
map.setUIToDefault();
map.setCenter(new GLatLng(35.66808, 138.568904), 13);
var myicon = defineIcon();
var request = GXmlHttp.create();
request.open("GET", "1211-9.php", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
var pointFromXml = xmlDoc.documentElement.getElementsByTagName("point");
var prev_a = null;
for(var i=0; i < pointFromXml.length; i++) {
var lat = pointFromXml[i].getAttribute("lat");
var lng = pointFromXml[i].getAttribute("lng");
var a = new GLatLng(lat,lng);
var s = pointFromXml[i].getAttribute("stop");
/* 頂点配列を作る 頂点(s=1)なら大きなマーカ，それ以外の頂点は小さなマーカ */
if(i==0 || s==1 || a.distanceFrom(prev_a)>10.0) { /* 近すぎるのは排除 */
var iconObj = s==1? myicon.normal: myicon.tiny;
point.push(new pointObj(new GMarker(a, { draggable: true, icon: iconObj}),s,1));
prev_a = a; /* 一つ前のaとの距離を調べるために記憶しておく */
}
}
/* ここに折れ線 polyline を書くプログラムを入れる */
drawPolyline();
drawMarker();
}
}
request.send(null);
} /* onLoad の終わり */
function drawPolyline() { /* グローバル変数pointのデータより折れ線を描画 */
var a = [];
for(var i in point){ /* isActive=0は削除されたことを意味し，描かない */
if(point[i].active) a[i] =point[i].gmarker.getLatLng();
}
if(polyline) map.removeOverlay(polyline); /* polylineが描かれていれば消去して描画 */
polyline = new GPolyline(a);
map.addOverlay(polyline);
}
function drawMarker(){ /* マーカーを表示 */
for(var i=0; i< point.length; i++){
var mark = point[i].gmarker;
map.addOverlay(mark);
GEvent.addListener(mark,"dragend",function(){/* ドラグエンドで折れ線再描画*/
drawPolyline();
});
/* マーカクリックで，マーカを地図上から削除，pointのisActiveを０にし，再描画 */
/* 再描画する関数redrawPolylinefuncをマーカごとに定義：番号iを与えることがポイント */
var redrawPolylinefunc = GEvent.callbackArgs(mark, function(n) {
map.removeOverlay(this);
point[n].active = 0;
drawPolyline();
},i);
/*マーカクリック時にredrawPolylinefucを実行するようにリスナーをつける */
GEvent.bind(mark,"click",redrawPolylinefunc,function(){
this.apply(arguments);
});
}
}
function defineIcon() {
var tinyIcon = new GIcon();
tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
//tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
tinyIcon.iconSize = new GSize(12, 20);
//tinyIcon.shadowSize = new GSize(22, 20);
tinyIcon.iconAnchor = new GPoint(6, 20);
tinyIcon.infoWindowAnchor = new GPoint(5, 1);
var normalIcon = new GIcon();
normalIcon.image = "http://www.google.com/mapfiles/marker.png";
normalIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
normalIcon.iconSize = new GSize(20,34);
normalIcon.shadowSize = new GSize(37,34);
normalIcon.iconAnchor = new GPoint(10,34);
normalIcon.infoWindowAnchor = new GPoint(15,1);
return {tiny: tinyIcon, normal: normalIcon};
}
function DisplayLatLngs() {
var str = "<table border=1><tr><th>緯度</th><th>経度</th><th>停留所</th></tr>";
for(i=0;i<point.length;i++) {
if(point[i].active)
str += "<tr><td>"
+ point[i].gmarker.getLatLng().x + "</td><td>" + point[i].gmarker.getLatLng().y
+ "</td><td>" + point[i].isStop + "</td></tr>";
}
document.getElementById("show").innerHTML = str + "</table>";
}
//]]>
</script>
</head>
<body onload="onLoad()">
<div id="map" style="width:500px; height:450px"></div>
<form> <input type="button" value="緯度経度一覧" onclick="DisplayLatLngs()"></form>
<div id="show">
</div>
<!-- <P>jikoku : <div id="show_jikoku"></div></P>
<P>ido : <div id="show_ido"></div></P>
<P>keido : <div id="show_keido"></div></P>
-->
</body>
</html>