Html 谷歌地图自定义标记视网膜分辨率

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

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

图标的实际大小是代码中定义的大小的两倍。这样做是为了确保图标在视网膜显示器上以高分辨率显示。 上面的代码直到今天都运行得很好，但是现在发生的事情如下

当图标使用google.maps.Animation.Drop下拉时，图标在下拉过程中以高分辨率显示，但当图标“降落”在地图上时，图标切换到低分辨率版本

有人有过同样的经历吗

谢谢你

更新 发现如果我指定谷歌地图的版本如下：

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

---

所以我猜这是最新的Goolge map API中的一个bug。

我也发现了这个问题。这个bug似乎出现在他们的API的最新版本（v3.7）中，因此如果您通过URL参数？v=3.6指定v3.6，它将正常工作

更新：在3.8+版本中（我认为），如果您使用的是视网膜图像，您可以使用optimized:false强制生成视网膜图像。这是因为optimized:true会将所有精灵编织成一个主精灵。这意味着只有在标记很少的情况下才应该这样做。而且，与Clusterer的配合也不太好

---

默认值现在已优化：true，这将首先确定设备是否能够在创建更高分辨率的主精灵之前渲染如此多的高分辨率图标。例如，在retina Macbook Pro上加载一张带有很多标记的地图，它们将显示高分辨率，但如果尝试iPhone4，则不会。如果你强制iPhone4使用optimized:false，并且有很多标记，它可能会口吃很多。不确定4S，但我认为它可能会使用更高分辨率的版本，因为它有更好的处理能力。

如果您遇到任何图标切换到较低分辨率的情况，这是因为地图api使用画布渲染图标（将图标分组等等），以获得更快的用户体验。因此，从技术上讲，它不是一个bug，但它确实会导致某些浏览器出现bug（如旧版ie）

但有一个设置可用于在

MarkerOptions

中使用

optimized:false

var marker = new google.maps.Marker({
             map: map,
             position: latlng,
             icon: image,                     
             shadow: shadow,
             optimized: false                                               
         });

---

我通过使用

scaledSize

而不是

size

来定义图像的宽度和高度，找到了解决方案。

scaledSize属性是谷歌在这里引用的正确属性：

只需使用具有

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

---

其中

路径/img/marker@2x.png

是一个

60px

x

80px

PNG。

他们在gMaps api网站上提到了这一点，尽管他们没有提到它的用途：/谢谢你的回答！这将有助于增加更多的细节，因为链接有时会死。谢谢