*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&amp;v=2&amp;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>
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS