- 追加された行はこの色です。
- 削除された行はこの色です。
*API7(ルートのラインを表示) [#i8fec2c8]
RIGHT:更新日&lastmod();
**ルートのラインを表示 [#mb1d9fd6]
xmlファイル上にある緯度、経度をたどってラインを表示する
''route01.xml''~
緯度、経度のデータファイル
<linedata>
<mark lat="34.55006174041507" lng="136.53918027877808" />
<mark lat="34.549681765671416" lng="136.5396523475647" />
<mark lat="34.54824138053943" lng="136.5378177165985" />
<mark lat="34.547711171145465" lng="136.53663754463196" />
<mark lat="34.54742839142073" lng="136.53672337532043" />
</linedata>
''表示ファイル''~
始点と終点にマーカを表示
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.co.jp/\maps?file=api&v=2&key=(キー)" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
/* 拡大縮小のコントロールを追加 */
map.addControl(new GLargeMapControl());
/* 衛星写真地図切り替えボタン */
map.addControl(new GMapTypeControl());
/* スケールの表示
map.addControl(new GScaleControl());
/* map.setCenter(new GLatLng(37.4419, -122.1419), 13); */
map.setCenter(new GLatLng(34.54824138053943,136.5378177165985), 17);
/* マーカの追加 */
var mp = new GLatLng(34.54824138053943,136.5378177165985);
var marker = new GMarker(mp);
map.addOverlay(marker);
loadInfo();
function loadInfo() {
var request = GXmlHttp.create();
request.open("GET", "route01.xml", true); // ここでtest.xmlを指定
request.onreadystatechange = function() {
if (request.readyState == 4) { // Google Maps内のブラウザ有効チェック
var xmlDoc = request.responseXML;
markers = xmlDoc.documentElement.getElementsByTagName("mark");
// ↑ここで<mark>を指定
plotPoint();
}
}
request.send(null);
}
function plotPoint() {
var points = [];
for (var i = 0; i < markers.length; i++) {
points.push(new
GPoint(parseFloat(markers[i].getAttribute("lng")),parseFloat(markers[i].getAttribute("lat"))));
points.push(new GPoint(parseFloat(markers[i].getAttribute("lng")),parseFloat(markers[i].getAttribute("lat"))));
// ↑<mark>内のlngとlatを順次pointsに足し込む
if( i== 0 || i ==markers.length-1){
var point2 = new GPoint( parseFloat(markers[i].getAttribute("lng")),parseFloat(markers[i].getAttribute("lat")));
var marker2 = new GMarker(point2);
map.addOverlay(marker2);
}
}
map.addOverlay(new GPolyline(points, "#FF0000", 4));
// ↑points, 色, 太さ で線を引く
}
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>