API7(ルートのラインを表示) †

更新日2007-08-02 (木) 13:36:35
↑

ルートのラインを表示 †

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"))));

            // ↑<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