谷歌地图自定义标记Retina分辨率

Question

我正在开发一个html5中的iPhone应用程序并使用Phonegap进行构建.在应用程序中有一个带有自定义标记的Google地图,标记图标的创建方式如下:

var image = new google.maps.MarkerImage("hat.png", null, null, null, new google.maps.Size(20,30));
var shadow = new google.maps.MarkerImage("shadow.png", null, null, null, new google.maps.Size(20,30));

var marker = new google.maps.Marker({
                 map: map,
                 position: latlng,
                 index: markers.length,
                 icon: image,                     
                 shadow: shadow,
                 animation: google.maps.Animation.DROP,
                 html: htmlContent                                                
             });

与代码中定义的大小相比,图标的实际大小是双倍大小.这样做是为了确保图标在Retina显示屏上以高分辨率显示.上面的代码工作正常,直到今天,但现在发生的是以下.

当图标下拉时,使用google.maps.Animation.DROP,图标会在向下显示高分辨率,但是当图标在地图上"登陆"时,图标会切换到低分辨率版本.

有没有人经历过同样的事情？

谢谢...

更新 发现,如果我指定谷歌地图版本,如:

http://maps.googleapis.com/maps/api/js?v=3.0

所以我想这是最新的Goolge地图API中的一个错误.

Answer 1

我通过使用scaledSize而不是size定义图像的宽度和高度来找到我的解决方案.

Answer 2

我也发现了这个问题.该错误似乎是其API的最新版本(v3.7),因此如果您通过URL参数指定v3.6？v​​ = 3.6它将正常工作.

更新:在版本3.8+(我认为)中,您可以使用optimized:false来强制使用视网膜图像(如果您使用的话).这是因为优化:true获取所有精灵并将它们编织成一个主精灵.这意味着只有标记很少时才应该这样做.此外,与Clusterer不太合作.

现在默认优化:true,这将首先确定设备是否可以在以更高分辨率创建主精灵之前处理渲染如此多的高分辨率图标.例如,在视网膜Macbook Pro上加载带有大量标记的地图,它们会出现高分辨率,但尝试使用iPhone 4,但不会.如果你强制使用优化的iPhone 4:false,并且有很多标记,它可能会口吃很多.不确定4S但我认为它可能会使用更高的res版本,因为它有更好的处理能力.

Answer 3

只需使用同一个对象url,size和scaledSize属性:

var icon = {
    url: 'path/img/marker@2x.png',
    size: new google.maps.Size(30, 40),
    scaledSize: new google.maps.Size(30, 40)
};

哪里path/img/marker@2x.png是60pxX 80pxPNG.