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

所以我猜这是最新的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是60px x 80px PNG。

Answer 4

如果您遇到任何图标切换到较低分辨率，那是因为地图api使用画布来渲染图标（将它们分组等等？）以显示更快的用户体验。所以它在技术上并不是一个错误，但它确实会导致在某些浏览器中发生错误的事情（比如旧版本）

但您可以使用MarkerOptions

在optimized: false中设置关闭设置

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

Answer 5

Scaled Size属性是Google在此处引用的正确属性：https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon

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

5 个答案: