0

XML ファイルのデータを使用してポリゴンを作成しようとしています。これまでポリゴンを使用したことがなく、基本機能を理解するために Google マップのドキュメントの例を調べましたが、例は機能しません。マーカーとポリラインを作成するために学習して使用した他のものとマージしようとしましたが、何かが欠けていて、ポリゴンが表示されないだけでなく、マップも表示されません。マップを表示するベース コードから始めて、そこから始めます。ポリゴンを構築するコードの追加を開始すると、マップが読み込まれなくなります。何かが足りないことはわかっていますが、これまでポリゴンを使用したことがないため、正確にはわかりません。

データに使用している XML ファイルの例を表示できます。ポリゴンを作成するためのコードは、「cap:polygon」という要素にあります。

http://www.mesquiteweather.net/xml/warnings.xml

ここに私がこれまでに持っているコードがあります...

<script type="text/javascript">

var lineColor = {
"Tornado Warning":                   "#FF0000",
"Severe Thunderstorm Warning":       "#FFFF33",
"Flash Flood Warning":               "#00FF00",
};

var infowindow = new google.maps.InfoWindow();

    // start here
    var thisurl = 'xml/warnings.xml';

      function initialize() {
    var myLatlng = new google.maps.LatLng(32.775833, -96.796667);
    var myOptions = {
      panControl: false,
      zoom: 5,
          mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL,
      position: google.maps.ControlPosition.RIGHT_TOP
    },
      center: myLatlng,     
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

   function MyLogoControl(controlDiv) {
    controlDiv.style.padding = '5px';
    var logo = document.createElement('IMG');
    logo.src = 'http://www.mesquiteweather.net/images/watermark_MW_GMap.png';
    logo.style.cursor = 'pointer';
    controlDiv.appendChild(logo);

    google.maps.event.addDomListener(logo, 'click', function() {
        window.location = 'http://www.mesquiteweather.net'; 
    });
  }

   var logoControlDiv = document.createElement('DIV');
   var logoControl = MyLogoControl(logoControlDiv);
   logoControlDiv.index = 0; // used for ordering
   map.controls[google.maps.ControlPosition.TOP_LEFT].push(logoControlDiv);

  var eventWarnings;

      downloadUrl(thisurl, function(data) {
          var polygon = data.documentElement.getElementsByTagName("feed");  
          var warningCoords = new google.maps.LatLng(cap:polygon),      
  });

  // Construct the polygon
  eventWarnings = new google.maps.Polygon({
    paths: warningCoords,
    strokeColor: lineColor[cap:event],
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: lineColor[cap:event],
    fillOpacity: 0.35
  });

  eventWarnings.setMap(map);

}
</script>

私はこの時点で立ち往生しており、何が欠けているのかわかりません。誰かが素晴らしいだろういくつかのアドバイスや提案を提供することができれば!

-ありがとう！

4

1 に答える 1

0

これは正しくありません (javascript エラーが表示されると思います):

var warningCoords = new google.maps.LatLng(cap:polygon)

google.maps.LatLngは引数として 2 つの数値を取ります。XML フィードから座標を解析し、それらを google.maps.LatLng オブジェクトに変換し、それらを配列にプッシュしてから、その配列を google.maps.Polygon コンストラクターの paths プロパティとして提供する必要があります。

于 2013-04-30T00:24:36.660 に答える