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

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使图标下降时，图标会以高分辨率显示在下降过程中，但当图标“着陆”在地图上时，图标会切换成低分辨率版本。

有没有人也遇到过同样的问题？

谢谢...

更新 发现如果我指定Google地图版本号：

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

所以我猜这是最新的Google地图API中的一个bug。

- andkjaer

Answer 1

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

- Kevin Underhill

---

他们在gMaps API网站上提到了这个链接，尽管他们没有提到它的用途。 :/ - Luuuud

Answer 2

只需使用具有url、size和scaledSize属性的对象：

var icon = {
    url: 'path/img/[e-mail]',
    size: new google.maps.Size(30, 40),
    scaledSize: new google.maps.Size(30, 40)
};

其中path/img/[e-mail]是一张60px x 80px的PNG图片。

- Tim

Answer 3

我也遇到了这个问题。该bug似乎在他们API的最新版本(v3.7)中出现，如果你通过URL参数?v=3.6指定v3.6，则会正常工作。

更新: 在版本3.8+（我想）中，如果您正在使用高清晰度图像，则可以使用optimized:false来强制使用视网膜图像。这是因为optimized:true将把所有精灵组合成一个主精灵。这意味着只有当您有非常少的标记时才应该这样做。此外，与Clusterer一起使用效果不太好。

默认值现在是optimized:true，它将首先确定设备是否能够处理渲染如此多的高分辨率图标，然后创建更高分辨率的主精灵。例如，在retina Macbook Pro上加载具有大量标记的地图，它们将显示高分辨率，但尝试使用iPhone 4则不会。如果您强制使用optimized:false来使用iPhone 4并且有很多标记，则可能会出现卡顿。不确定4S情况如何，但我认为它可能会使用更高分辨率版本，因为它具有更好的处理能力。

- Rob Porter

Answer 4

如果您遇到图标分辨率降低的情况，那是因为地图API使用画布来呈现图标（分组等），以提供更快的用户体验。所以这并不是技术上的bug，但在某些浏览器中（如旧版IE）会导致错误发生。

但是您可以在MarkerOptions中使用optimized: false设置来关闭此功能。

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

- Michael Hussey

Answer 5

在Google的这里引用，Scaled Size属性是正确的使用方式：https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon

- Dillon Bailey

---

谢谢你的回答！如果能再多加一点细节就更好了，因为链接有时会失效。谢谢！ - Maximillian Laumeister