Question

这是我在这里发表的第一篇文章，希望有人可以提供帮助。

我正在使用谷歌地图建立一个地图网站。

地图根据类型类别显示多达14个不同的图标我理解精灵图像的理论和服务器调用的减少，所以我有一个图像包含所有标记。

问题：如何设置精灵的位置，但只调用一次图像？我看过这篇文章 Google map marker sprite image position

但仅显示更改一个标记的图像

这是代码

 //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)
};

在循环内部，并不意味着图像被重复下载（并且它将是比单个图标更大的图像）从而击败使用精灵的对象？

这是网站btw http://www.searchforsites.co.uk/full_screen.php

谷歌地图标记图像精灵

0 个答案: