Question

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

您可以查看我用于数据的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>

我陷入困境，不知道自己错过了什么。如果有人可以提供一些很棒的建议或建议！

-Thanks！

Answer 1

这是不正确的（我希望它会给你一个javascript错误）：

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

google.maps.LatLng将两个数字作为参数。您需要解析XML Feed中的坐标，将它们转换为google.maps.LatLng对象，将它们推入数组，然后将该数组作为google.maps.Polygon构造函数中的paths属性提供。

从XML数据创建Google Map V3多边形

1 个答案: