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

我正在开发一个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             
      });

图标的实际大小是两倍大小。这样做是为了确保图标以高分辨率显示在Retina显示屏上。上面的代码一直工作到现在，但现在发生的是以下内容。

当图标下拉时，使用google.maps.Animation.DROP，图标在高分辨率的下方显示，但当地图上的图标“着陆”时，图标切换为低分辨率分辨率版本。

有没有人遇到过相同的问题？

谢谢...

UPDATE 发现，如果我指定的谷歌地图版本，如：

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

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

来源

2012-02-09 andkjaer

我刚刚发现这个问题。该错误似乎在其API的最新版本（v3.7）中，所以如果您通过URL参数？v = 3.6指定v3.6，它会正常工作。

更新：在版本3.8+（我认为）你可以使用优化：假强制视网膜图像，如果你使用一个。这是因为优化：true会将所有精灵组织成一个主精灵。这意味着如果你只有很少的标记，你应该只做这个。另外，与Clusterer不太适合。

默认值现在已经过优化：true，如果设备在更高分辨率下创建主精灵之前甚至可以处理渲染许多高分辨率图标，它将首先确定。例如，在视网膜Macbook Pro上加载大量标记的地图，它们会出现高分辨率，但尝试使用iPhone 4并不会。如果你强制使用优化的iPhone 4：false，并且有很多标记，它可能会造成很多结局。不知道4S，但我认为它可能会使用更高分辨率的版本，因为它具有更好的处理能力。

来源

2012-02-12 18:30:28

如果您遇到任何图标切换到较低的分辨率，这是因为地图API使用画布来渲染图标（将它们分组和什么？），以显着提高用户体验。因此，这不是技术上的错误，但这确实会导致车的事情在某些浏览器发生（如老式IE）

但是有一个设置，您可以使用使用MarkerOptions关闭optimized: false

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

来源

2012-02-22 04:21:14

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

来源

2014-08-01 13:41:43

这看起来是正确的答案 – user1095118 2015-04-12 00:31:44

一些带有标记的链接会很棒 – m1crdy 2015-05-27 15:23:15

它们在gMaps api网站[这里]（https://developers.google.com/maps/documentation/javascript/markers#）转换为图标），尽管他们没有提及它的用途。：/ – LuudJacobs 2015-10-14 13:09:15

缩放大小属性是正确的使用由谷歌作为参考这里：https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon

来源

2015-10-25 02:55:57

谢谢你的回答！添加更多细节会有帮助，因为链接有时会失效。谢谢！ – 2015-10-25 03:25:46

只需使用一个对象与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/[email protected]是60px X 80px PNG。

来源

2017-07-27 13:30:17 Tim

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

回答

相关问题