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

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

与代码中定义的尺寸相比，图标的实际尺寸是两倍。这样做是为了确保图标在视网膜显示屏上以高分辨率显示。 上面的代码直到今天都运行良好，但现在发生的情况如下。

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

有人有过同样的经历吗？

谢谢...

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

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

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

Answer 1

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

Answer 2

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

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

其中 path/img/[电子邮件受保护] 是 60px x 80px PNG。

Answer 3

我也刚刚发现这个问题。该错误似乎出现在其 API 的最新版本 (v3.7) 中，因此如果您通过 URL 参数 ?v=3.6 指定 v3.6，它将正常工作。

更新： 在 3.8+ 版本中（我认为），如果您正在使用的话，您可以使用 optimization: false 来强制显示视网膜图像。这是因为 optimized: true 会获取所有精灵并将它们编织到一个主精灵中。这意味着只有在标记很少的情况下才应该这样做。另外，与 Clusterer 配合得不太好。

默认值现已优化：true，这将首先确定设备是否可以处理渲染如此多的高分辨率图标，然后再以更高分辨率创建主精灵。例如，在视网膜 Macbook Pro 上加载带有大量标记的地图，它们会显示为高分辨率，但尝试 iPhone 4 时却不会。如果你强迫iPhone 4使用optimized: false，并且有很多标记，它可能会很卡顿。不确定 4S，但我认为它可能会使用更高分辨率的版本，因为它具有更好的处理能力。

Answer 4

如果您遇到任何将图标切换到较低分辨率的情况，那是因为地图 api 使用画布来渲染图标（对它们进行分组等等？），显然是为了更快的用户体验。因此，从技术上讲，这不是一个错误，但它确实会导致某些浏览器（例如较旧的 ie）中发生错误，

但是您可以使用一个设置来使用 optimized 在 MarkerOptions 中关闭该设置：假

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

Answer 5

缩放尺寸属性是 Google 此处引用的正确使用属性： https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon