如何有效地添加多个Google Map图标一个大的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
            }
        }