-1

我在我的應用程序中使用谷歌地圖。我有自定義標記正在顯示,所有在Firefox上看起來都很好,因爲您可以在此圖像中看到enter image description here谷歌Chrome中的谷歌地圖模糊標記

但是,在Chrome中,它都是模糊的。標記是模糊的。在這裏你可以看到 enter image description here

我加入廠商這樣

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

所以基本上鉻一直試圖優化的谷歌地圖。他們做一個重複的標記,你可以在下面的圖片中看到。模糊的那個是我看到的那個,因爲那個不透明度是0.01,所以它是模糊的。另一個根本不可見。希望鉻能很快解決它。

enter image description here

+0

請提供[MCVE]演示該問題。 – geocodezip

回答

1

你可以嘗試這些CSS規則上的圖標:

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

但據我所知,鉻一直有與縮放圖像的問題。 Firefox被認爲是一個相當慢的瀏覽器,這可能與Firefox爲什麼能夠更加整潔地渲染東西有關。

我可以告訴你的唯一解決方案是確保圖標不縮小。確保它們尺寸合適,然後避免縮放它們。 (我個人使用timthumb用於此目的,用PHP。你仍然可以通過javascript獲得圖像)

然後,我可能是錯的,我不是老手。不過,我至少有70%確定這是一個你無法控制的瀏覽器。

你可以嘗試的另一件事是,要解決這個問題: 比CSS transition effect makes image blurry/moves image 1px, in Chrome?

其他,這真的僅僅是試驗和錯誤。我很確定沒有明確的「這會做到這一點!」一般選項。

在getImageMarker
+1

感謝您的回覆,我對該帖子進行了編輯,我想我會發現問題所在。 – mohsinali1317

+1

ahhh好的。 Whelp,谷歌的這種情況經常發生。我希望它能很快得到解決!有過類似的問題多次。 – NoobishPro

0

使用不大小:..

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