Html 谷歌地图自定义标记 Retina 分辨率
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9208916/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google map custom markers Retina resolution
提问by andkjaer
I'm developing an iPhone app in html5 and making the build with Phonegap. In the app there's a Google map with custom markers, the way the marker icons are created is as follows:
我正在用 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
});
The actual size of the icon's are double size compared to the sizes defined in the code. This is done to make sure the icons are shown in high res on the Retina display. The code above worked fine until today, but what happens now is the following.
与代码中定义的尺寸相比，图标的实际尺寸是两倍。这样做是为了确保图标以高分辨率显示在 Retina 显示屏上。上面的代码直到今天都运行良好，但现在发生的情况如下。
When the icons Drop down, using the google.maps.Animation.DROP, the icon is shown in high res on the way down, but when the icon "lands" on the map, the icon switches to a low res resolution version.
当图标下拉时，使用 google.maps.Animation.DROP，图标在下降的过程中以高分辨率显示，但是当图标“降落”在地图上时，图标切换到低分辨率版本。
Has anyone ever experienced the same?
有没有人经历过同样的事情？
Thank you...
谢谢...
UPDATEFound out that if I specify the Google map version like:
更新发现，如果我指定谷歌地图版本，如：
http://maps.googleapis.com/maps/api/js?v=3.0
So I guess it's a bug in the newest Goolge map API.
所以我猜这是最新的 Goolge 地图 API 中的一个错误。
采纳答案by Rob Porter
I just found this problem too. The bug appears to be in latest (v3.7) of their API, so if you specify v3.6 via the URL parameter ?v=3.6 it'll work fine.
我也刚发现这个问题。该错误似乎在其 API 的最新版本 (v3.7) 中，因此如果您通过 URL 参数 ?v=3.6 指定 v3.6，它将正常工作。
Update:In version 3.8+ (I think) you can use optimized: false to force a retina image, if you are using one. This is because optimized: true takes all your sprites and weaves them together into a master sprite. This means you should only do this if you have very few markers. Also, doesn't work too well with Clusterer.
更新：在 3.8+ 版本（我认为）中，如果您正在使用，您可以使用优化：false 来强制使用视网膜图像。这是因为优化：true 获取您所有的精灵并将它们编织在一起成为一个主精灵。这意味着只有在标记很少时才应该这样做。此外，与 Clusterer 一起工作不太好。
The default is now optimized: true, which will determine first if the device can even handle rendering so many high-res icons before creating a master sprite at a higher resolution. For example, load a map with a lot of markers on a retina Macbook Pro, and they'll appear high-res, but try an iPhone 4 and it will not. If you force the iPhone 4 using optimized: false, and have a lot of markers, it might stutter a lot. Not sure about the 4S but I assume it'll probably use the higher res version as it has a lot better processing capability.
现在优化了默认值：true，这将首先确定设备是否可以在以更高分辨率创建主精灵之前处理渲染这么多高分辨率图标。例如，在 Retina Macbook Pro 上加载带有大量标记的地图，它们会显示为高分辨率，但尝试使用 iPhone 4 则不会。如果您强制使用优化的 iPhone 4：false，并且有很多标记，它可能会卡顿很多。不确定 4S，但我认为它可能会使用分辨率更高的版本，因为它具有更好的处理能力。
回答by Kevin Underhill
I found my solution to this by using scaledSizeinstead of sizeto define the width and height of the image.
我通过使用scaledSize而不是size定义图像的宽度和高度找到了我的解决方案。
回答by Tim
Simply use an object with url, size, and scaledSizeattributes:
只需使用一个物体url，size和scaledSize属性：
var icon = {
url: 'path/img/[email protected]',
size: new google.maps.Size(30, 40),
scaledSize: new google.maps.Size(30, 40)
};
Where path/img/[email protected]is a 60pxx 80pxPNG.
哪里path/img/[email protected]是60pxX 80pxPNG。
回答by Michael Hussey
If you encounter any switching of icons to lower resolution, it's because the maps api uses canvas to render the icons (grouping them and whatnot?) for a faster user experience apparently. So it isn't technically a bug, but it does cause buggy things to happen in certain browsers (like older ie)
如果您遇到任何图标切换到较低分辨率的情况，那是因为地图 api 使用画布来呈现图标（将它们分组等等？）显然是为了获得更快的用户体验。所以它在技术上不是一个错误，但它确实会导致某些浏览器中发生错误的事情（比如旧的 ie）
But there is a setting you can use to turn off in MarkerOptionsusing optimized: false
但是有一个设置可以用来关闭MarkerOptions使用optimized: false
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: image,
shadow: shadow,
optimized: false
});
回答by Dillon Bailey
Scaled Size property is the correct one to use as referenced by Google here: https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon
Scaled Size 属性是谷歌在此处引用的正确使用：https: //developers.google.com/maps/documentation/javascript/3.exp/reference#Icon
