GoogleMapAPI/API7
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
*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; ...
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.co.jp/\maps?file=api...
<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),...
map.setCenter(new GLatLng(34.54824138053943,...
/* マーカの追加 */
var mp = new GLatLng(34.54824138053943,136.53781...
var marker = new GMarker(mp);
map.addOverlay(marker);
loadInfo();
function loadInfo() {
var request = GXmlHttp.create();
request.open("GET", "route01.xml", true); /...
request.onreadystatechange = function() {
if (request.readyState == 4) { // Googl...
var xmlDoc = request.responseXML;
markers = xmlDoc.documentElement.get...
// ↑ここで<mark>を指定
plotPoint();
}
}
request.send(null);
}
function plotPoint() {
var points = [];
for (var i = 0; i < markers.length; i++) {
points.push(new GPoint(parseFloat(ma...
// ↑<mark>内のlngとlatを順次pointsに足し込む
if( i== 0 || i ==markers.length-1){
var point2 = new GPoint( parseF...
var marker2 = new GMarker(point...
map.addOverlay(marker2);
}
}
map.addOverlay(new GPolyline(points, "#FF00...
// ↑points, 色, 太さ で線を引く
}
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 600px"></...
</body>
</html>
終了行:
*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; ...
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.co.jp/\maps?file=api...
<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),...
map.setCenter(new GLatLng(34.54824138053943,...
/* マーカの追加 */
var mp = new GLatLng(34.54824138053943,136.53781...
var marker = new GMarker(mp);
map.addOverlay(marker);
loadInfo();
function loadInfo() {
var request = GXmlHttp.create();
request.open("GET", "route01.xml", true); /...
request.onreadystatechange = function() {
if (request.readyState == 4) { // Googl...
var xmlDoc = request.responseXML;
markers = xmlDoc.documentElement.get...
// ↑ここで<mark>を指定
plotPoint();
}
}
request.send(null);
}
function plotPoint() {
var points = [];
for (var i = 0; i < markers.length; i++) {
points.push(new GPoint(parseFloat(ma...
// ↑<mark>内のlngとlatを順次pointsに足し込む
if( i== 0 || i ==markers.length-1){
var point2 = new GPoint( parseF...
var marker2 = new GMarker(point...
map.addOverlay(marker2);
}
}
map.addOverlay(new GPolyline(points, "#FF00...
// ↑points, 色, 太さ で線を引く
}
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 600px"></...
</body>
</html>
ページ名:
![[PukiWiki]](image/../localimages/Atom.gif "[PukiWiki]")
