Google ChromeのGoogleマップのぼかしマーカー

Question

私のアプリケーションでGoogleマップを使用しています。あなたがこの画像で見ることができるように、私はカスタムマーカーが表示されており、すべてFirefox上で見えます。

しかし、その後クロムですべてがぼやけています。マーカーはぼやけています。ここでは、私は基本的にクロムが最適化されたGoogleマップにしようとしている。この

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なのでぼやけています。もう一方は全く見えません。間もなくクロムがそれを解決します。

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?

、これは実際には試行錯誤です。私は決定的なものはないと確信している "これはトリックをするよ！"一般的なオプション。 getImageMarkerで

Answer 2

はないサイズを使用..しかし

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