在缩放变化上缩放标记

时间:2012-08-14 08:39:33

标签: javascript google-maps google-maps-markers scaling

对于圣诞市场,我目前正在开发Google地图。我加载了一个不同图标的精灵,代表不同大小的市场服务:

enter image description here


(灰色版本用于停用状态):
http://www.felixkittler.de/area51/googlemaps/buden.html

到目前为止,只要用户没有放大或缩小,一切都能正常工作 - 如果是这样的话,那么这个小组不会缩放,因此看起来太大或太小。

我以为我可以预定义另一组图标,包含相同的标记,但是使用缩放的markerImages。不幸的是,我无法让这个工作:

for(i=0; i<markerSizes.length; i++){
    var aktiv = new google.maps.MarkerImage(
        "http://www.felixkittler.de/area51/googlemaps/buden/SPRITE.png", 
        new google.maps.Size(markerSizes[i], 27, "px", "px"),
        new google.maps.Point(85, i*30),
        new google.maps.Point(0, 0),
        new google.maps.Size(markerSizes[i]*2, 14) //this doesn't work!!!
    );
    gicons_aktiv.push(aktiv);
}

我还没有跟踪zoom_changed事件,但是我设置了一个应该使用缩放图标的文件版本:
http://www.felixkittler.de/area51/googlemaps/buden_scaled.html (在第116行和第125行中放大(x2)。

任何想法如何解决这个问题? 由于这不是我正在使用的唯一精灵,我想避免上传同一精灵的多个分辨率,放大或缩小会更方便。

感谢!!!

1 个答案:

答案 0 :(得分:2)

所以,我自己发现了。
感谢Marc Ridey this blog post

原始大小的标记图像:

var original = new google.maps.MarkerImage(
    "http://www.path/to/sprite.png", 
    new google.maps.Size(markerSizes[i], 24), //marker height=24, width in array
    new google.maps.Point(0, i*30), // each row of the sprite grid is 30px tall
    new google.maps.Point(0, 0),
    null // use file dimensions 168 x 270px
);

用于显示标记缩放50%的标记图像:

var half = new google.maps.MarkerImage(
    "http://www.path/to/sprite.png", 
    new google.maps.Size(markerSizes[i]/2, 12),
    new google.maps.Point(0, i*15),
    new google.maps.Point(0, 0),
    new google.maps.Size(84, 135) // original dimension of sprite: 168 x 270 px
);

希望这有助于任何人(: