0

我正在尝试使用 XML 文件中的数据创建多边形。我以前从未使用过多边形，并且我研究了 Google Map 文档示例以降低基本功能，但这些示例甚至都不起作用。我试图将它与我所学并用于创建标记和折线的其他东西合并，但我遗漏了一些东西，现在不仅多边形不显示，而且地图甚至不显示。我从显示地图的基本代码开始，然后从那里开始。一旦我开始添加代码来构建多边形，它就会导致地图无法加载。我知道我遗漏了一些东西，但我不确定到底是什么，因为我以前从未使用过多边形。

您可以查看我用于数据的 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将两个数字作为参数。您需要从 XML 提要中解析坐标，将它们转换为 google.maps.LatLng 对象，将它们推送到一个数组中，然后将该数组作为 google.maps.Polygon 构造函数中的路径属性提供。

于 2013-04-30T00:24:36.660 回答