2

これは私の最初の投稿です。誰かが助けてくれることを願っています。

Googleマップを使用してマッピングWebサイトを構築しています。

マップには、タイプ カテゴリに基づいて最大 14 個の異なるアイコンが表示されます。スプライト画像の理論と、これらのサーバー呼び出しの削減を理解しているので、すべてのマーカーを結合した 1 つの画像を作成しました。

質問: スプライトの位置を設定し、画像を 1 回だけ呼び出すにはどうすればよいですか? この投稿を見てき ましたGoogle マップ マーカー スプライト イメージの位置

しかし、それは1つのマーカーの画像の変更のみを示しています

これがコードです

 //set the image once
var img = {
    url:'images/site/type_sprite.png',
    size: new google.maps.Size(32,32),
    origin: new google.maps.Point(0,0)
};

idx = 0;
for (var i = 0; i < l; i++) {
     lat = parseFloat(markers[i].getAttribute("lt"));
     lng = parseFloat(markers[i].getAttribute("ln"));
     var type = markers[i].getAttribute("typ");

     if ((lat < latUpper && lat > latLower) && (lng < lngUpper && lng > lngLower) && (jQuery.inArray(type,filter_arr)>=0)) {

             //change the position of the icon sprite depending on type
             switch(type) {
                  case 'AA':
                    img(origin, new google.maps.Point(0,0));
                    break;
                case 'AC':
                    img(origin = new google.maps.Point(0, 42));
                    break;
                  case 'ACF':
                    img(origin= new google.maps.Point(0,84));
                    break;
                  default:
                    img(origin= new google.maps.Point(0,0));
            }
            var id = markers[i].getAttribute("id");
            var name = markers[i].getAttribute("nme");
            //var icon = 'images/pins/' + type + '.png';
            var point = new google.maps.LatLng(lat, lng);
            var marker = new google.maps.Marker({
                map: map,
                position: point,
                title: name,
                icon: img
            });
        //add to valid array
        markersArray.push(marker);

        //build infowindow string
        str = '<div class="iw_h">' + id + ' ' + name + '</div>';
        bindInfoWindow(marker, map, infoWindow, str);
        bounds.extend(point);
        map.fitBounds(bounds);
        idx++;
    }
} //end of loop
}

コードを入れると

    var img = {
    url:'images/site/type_sprite.png',
    size: new google.maps.Size(32,32),
    origin: new google.maps.Point(0,0)
};

ループ内では、画像が繰り返しダウンロードされ（個々のアイコンよりも大きな画像になる）、スプライトを使用するオブジェクトが無効になるということではありませんか？

これはサイトです http://www.searchforsites.co.uk/full_screen.php

4

0 に答える 0