如何高效地添加多個Google地圖圖標一個大的JSON標記列表？

Question

我正在使用Gmap3（一個用於Google Maps API v3的jquery包裝），但是這個問題應該適用於任何實現。

我的地圖有幾千個標記（通過PHP寫入JSON變量）。對於所有這些，只有5個可能的圖標。我正在尋找的是一種引用圖標的方式，而不是每次都將它們全部包含在JSON中，因爲它們中只有5個是可笑的，效率低下。

所以我想在JS中聲明圖標，並在JSON中添加一個簡單的標識符。

什麼是正確的方法來做到這一點？一個循環？

// JSON generated by PHP or whatever 
var myMarkers = [ 
    { lat:12.34567, lng:123.4567, data:"Blah blah", options: { icon: img1 } }, 
    { lat:21.23456, lng:123.4567, data:"Blah blah", options: { icon: img2 } }, 
    { lat:32.12345, lng:123.4567, data:"Blah blah", options: { icon: img3 } }, 
    { lat:43.21234, lng:123.4567, data:"Blah blah", options: { icon: img1 } }, 
    { lat:54.32123, lng:123.4567, data:"Blah blah", options: { icon: img2 } }, 
    { lat:65.43212, lng:123.4567, data:"Blah blah", options: { icon: img3 } }, 
    { lat:76.54321, lng:123.4567, data:"Blah blah", options: { icon: img1 } } 
    // ... add 2000 more records here ... 
    ]; 

var img1 = new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png'); 
var img2 = new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png'); 
var img3 = new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_blue.png'); 
var shadow = new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_shadow.png'); 

$('#map_canvas').gmap3({ 
     action: 'init' 
    },{ 
     action: 'addMarkers', 
     markers: myMarkers, 
     marker: { 
      options:{ 
       // icon: markers.data.options.icon, or nothing, or what?? 
       shadow: myShadow 
      } 
     } 
    } 
); 

Answer 1

我會有一個標記圖像數組。你的JSON結構只需要引用數組的索引。或者使用一個對象作爲哈希映射。

var myMarkers = [ 
    { lat:12.34567, lng:123.4567, data:"Blah blah", options: { icon: 0} }, 
    { lat:21.23456, lng:123.4567, data:"Blah blah", options: { icon: 1} }, 
... 
]; 

var imgs = [ 
    new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png'), 
    new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png'), 
    new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_blue.png') 
]; 

然後獲取JSON並在循環中更新它。

for (var i = 0, len = myMarkers.length; i < len; i++) { 
    myMarkers[i].options.icon = imgs[myMarkers[i].options.icon]; 
} 

那麼我假設你只需要指定陰影？ （從未使用gmap3）

marker: { 
      options:{ 
       shadow: myShadow 
      } 
     }