1

我正在使用 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
            }
        }
    }
);
4

1 回答 1

2

我会有一组标记图像。您的 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
            }
        }
于 2012-10-18T11:01:14.730 回答