從XML數據創建Google地圖V3多邊形

我正嘗試使用XML文件中的數據創建多邊形。我之前從未使用過多邊形，並且我研究了Google Map文檔示例以獲取基本特徵，但這些示例甚至不起作用。我試圖將其與我學過的其他東西進行合併，並用它來創建標記和多邊形線條，但我錯過了一些東西，現在不僅沒有顯示多邊形，而且地圖也沒有顯示出來。我從基本代碼開始顯示地圖並從那裏開始。一旦我開始添加代碼來構建多邊形，它會導致地圖不加載。我知道我錯過了一些東西，但我不確定自從我從未使用多邊形之前究竟是什麼。從XML數據創建Google地圖V3多邊形

您可以查看我用於數據的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>

我停留在這一點上不知道我錯過了什麼。如果任何人都可以提供一些很棒的建議或建議！

- 謝謝！

來源

2013-04-29 Texan78

這是不正確的（我希望它給你一個JavaScript錯誤）：

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

一個google.maps.LatLng需要兩個數字作爲參數。您需要解析XML Feed中的座標，將它們轉換爲google.maps.LatLng對象，將它們推送到數組中，然後將該數組作爲google.maps.Polygon構造函數中的路徑屬性提供。

來源

2013-04-30 00:24:36 geocodezip

我會認爲它會從XML元素（cap：polygon）中獲取這些數字來生成座標。我之所以這麼做是因爲這是我如何製作標記的原因。我將如何在數組中設置它，因爲會有多條線因爲通過XML提供而始終在變化？ -謝謝！ – Texan78 2013-04-30 02:36:12

我創建了兩個與您提供的示例相同的地圖，但多邊形未顯示。我已經瀏覽了代碼並將其比較了幾個小時和幾個小時，並且我看不到任何錯誤。有什麼我失蹤，我在看過http://www.mesquiteweather.net/xml/polywarnings.html和http://www.mesquiteweather.net/googlemap_poly.html – Texan78 2013-04-30 18:58:48

嘗試製作一份XML的副本，保存作爲服務器上的文件，看看是否有效。標題看起來幾乎與我一樣，你使用的是Apache，我的主機是windows。不明白爲什麼它不適合你。 – geocodezip 2013-04-30 19:26:10

從XML數據創建Google地圖V3多邊形

回答

相關問題