Google谷歌地图中谷歌地图的模糊标记

Question

我在我的应用程序中使用谷歌地图。我已经显示了自定义标记，并且在Firefox上看起来都很正常，如图所示

但是在Chrome中它很模糊。标记模糊。在这里你可以看到

我正在添加像这样的制造商

var marker = new google.maps.Marker({
    position: location.position(),
    map: map,
    draggable: drag,
    icon: getLocationMarker(loc),
    animation: google.maps.Animation.DROP
});

function getLocationMarker(loc) {
var icon = marker_icon_default;

if (!loc.organization().hasFancyMarkers()) // if the organization doesn't have fancy markers module
    return icon;

if (!loc.checkIfOrderHasRemainingAmount()) // if there is no remaining amount for the orders then we take the default icon
    return icon;

var hasTentativeMatches = loc.anyOrderHasPotentialMatches();

switch (hasTentativeMatches) {
    case true:
        icon = getIconWithTentativeMatches(loc);
        break;
    case false:
        icon = getIconWithoutTentativeMatches(loc);
        break;
}

return getImageMarker(icon);
}


function getImageMarker(icon) {
var image = {
    url: icon,
    // This marker is 40 pixels wide by 40 pixels high.
    size: new google.maps.Size(40, 40),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (15, 32).
    anchor: new google.maps.Point(15, 32),
    scale: 2
};
return image;
}

所以Chrome基本上都试图优化谷歌地图。它们会制作一个重复的标记，您可以在下图中看到它。模糊的一个是我看到的，它很模糊，因为那个上的不透明度是0.01。另一个根本不可见。希望chrome能很快解决它。

Answer 1

您可以在图标上尝试这些css规则：

img.icon{  
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

但据我所知，chrome一直存在缩放图像的问题。 Firefox被认为是一个相当慢的浏览器，这可能与Firefox为什么能够更整洁地渲染事物有关。

我能告诉你的唯一解决方案是确保图标不缩小。确保它们的尺寸合适，然后避免缩放它们。 （我个人使用timthumb用于此目的，使用PHP。您仍然可以通过javascript获取图像）

然后，我可能错了，我不是老手。但是，我至少70％确定这是一个你无法控制的浏览器。

您可以尝试的另一件事是这个问题的解决方案： CSS transition effect makes image blurry / moves image 1px, in Chrome?

除此之外，这真的只是反复试验。我非常肯定没有明确的＆＃34;这就是诀窍！＆＃34;一般来说。

Answer 2

getImageMarker中的

不能使用 size：.. ，而是

scaledSize: new google.maps.Size(xx,yy),