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 に答える