使用jQuery將XML解析爲GMaps API的數組

Question

我通過使用Google Maps API創建我的婚禮網站來教導自己的JavaScript。我已經通過文檔和copypasta實驗瞭解了很多，但不知道如何做到這一點：我想要做的是讀取包含圖標信息（包含圖標的精靈圖像的名稱和偏移量）的外部XML文件），並將其存儲在創建地圖標記時可以訪問的數組中。例如，我希望能夠爲接待人員創建一個標記併爲其分配圖標「派對」。下面是我到目前爲止的代碼讀取圖標文件：

 jQuery.get("markericons.xml", {}, function(data) { 
     jQuery(data).find("markericon").each(function() { 
      var icon = jQuery(this); 
      var name = icon.attr("name"); 
      var url = 'images/icons/mapsprites.png'; 
      var size = new google.maps.Size(32, 37); 
      var origin = new google.maps.Point(parseInt(icon.attr("x")),parseInt(icon.attr("y"))); 
      var anchor = new google.maps.Point((origin.x+16),origin.y); 
      var icon = new google.maps.MarkerImage(url, size, origin, anchor); 
     }); 
    }); // how to store this in an array so that I can access elements by name later? 

，然後在谷歌地圖上創建實際的地標時，類似如下：

   var marker = new google.maps.Marker({ 
       position: latlng, 
       map: map, 
       icon: icon.name=="party", // pseudo-code... how to do this? 
       title: title 
      }); 

我還是個編程noob，所以我會很感激任何幫助。謝謝！

Answer 1

，你應該有一個JSON對象，你.each()或.get()方法之外，這取決於你想如何訪問它是（我在.get()之外猜測，所以我們將在這個例子中使用它），然後在你的.each()裏面的變量中創建一個JSON對象。

var storage = {} 
jQuery.get("markericons.xml", {}, function(data) { 
    jQuery(data).find("markericon").each(function() { 
     var icon = jQuery(this), 
      name = icon.attr("name"); 
     storage[name] = { 
      url: 'images/icons/mapsprites.png', 
      size: new google.maps.Size(32, 37), 
      origin: new google.maps.Point(parseInt(icon.attr("x")),parseInt(icon.attr("y"))), 
      anchor: new google.maps.Point((origin.x+16),origin.y), 
      icon: new google.maps.MarkerImage(url, size, origin, anchor) 
     }; 
    }); 
}); 

現在

，您可以通過名稱訪問谷歌地圖的東西：

// for this purpose, let's say `name` is "reception": 
console.log(storage.reception) 
// => prints out { url: ..., size: ..., origin: ..., anchor: ..., icon: ... } 

此外，在原來的JS，你有icon聲明兩次，所以我也不太清楚你想要什麼這樣做。

Answer 2

你應該使用GICON：http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GIcon

例如如何使用它： http://code.google.com/apis/maps/documentation/javascript/v2/examples/icon-simple.html