망막 이미지가있는 Google지도에서 마커 클러스터 러 플러스를 사용하는 방법

Question

마커 클러스터 러를 사용하고 있습니다.Plus Google지도에서 그룹 마커를 그룹화하지만 EnableRetinaIcons 옵션이 작동하지 않는 것 같습니다.

// Custom style to alter the default font color (style is always the same).
var styles = [
    {
        url: 'PATH_TO_MY_66x66px_IMAGE',
        textColor: '#ddddd',
        textSize: 18,
        width: 33,
        height: 33,
    }
];

// Calculator function to determine which style to use (I only have one)
var calculator = function (markers, iconstyles){
    return{ text: markers.length.toString(), index:1};
};

// Set Options
var clusterOptions = {
    title: 'Cluster Title',
    enableRetinaIcons: true,
    styles: styles,
    calculator: calculator
}

// Add to map
new MarkerClusterer(this.map, this.markers, clusterOptions);

.

---

EnableRetinaIcons 옵션이 작동하지 않는 것처럼 보이지 않으며 이미지가 두 배 크기가 표시됩니다.

폭을 66x66px로 설정하면 도움이되지 않습니다.

누군가가 이것을 올바르게 구성하는 방법을 알고 있습니까?

Answer 1

이것은 Marker Clusterer Plus에서 분명히 버그입니다. 실제로이 옵션을 사용하는 코드의 유일한 장소는 다음과 같습니다.

img = "<img src='" + this.url_ + "' style='position: absolute; top: " + spriteV + "px; left: " + spriteH + "px; ";
if (!this.cluster_.getMarkerClusterer().enableRetinaIcons_) {
  img += "clip: rect(" + (-1 * spriteV) + "px, " + ((-1 * spriteH) + this.width_) + "px, " +
      ((-1 * spriteV) + this.height_) + "px, " + (-1 * spriteH) + "px);";
}
img += "'>";

.

실제로 실제로 스프라이트 아이콘을위한 클리핑을 비활성화하지만 실제로 필요한 망막 동작을 실제로 실행하지 않습니다. 아이콘의 HTML 트리는 실제로 다음과 같습니다.

그래서 아이콘을 둘러싼 Div가 적절한 치수 세트 (33x33)가 있지만 매우 이미지 (파란색 코드)는 치수가 설정되지 않습니다.

다른 분기를 추가하여 마커 클러스터 러 라이브러리를 패치하여 문제를 해결하려고 시도했습니다.

img = "<img src='" + this.url_ + "' style='position: absolute; top: " + spriteV + "px; left: " + spriteH + "px; ";
if (!this.cluster_.getMarkerClusterer().enableRetinaIcons_) {
  img += "clip: rect(" + (-1 * spriteV) + "px, " + ((-1 * spriteH) + this.width_) + "px, " +
      ((-1 * spriteV) + this.height_) + "px, " + (-1 * spriteH) + "px);";
}
else {
    img += "width: " + this.width_ + "px;" + "height: " + this.height_ + "px;";
}
img += "'>";

.

작동하는 것 같습니다 :

패치 된 라이브러리 완료 @Pastebin

테스트 예제 - http://jsfiddle.net/rt28t/2/2/2/A>

버그를보고하고 제안 된 패치로 추가 할 수 있습니다. -)

Answer 2

이 질문에 대한 답변을 알고 있지만,이 문제를 해결하는 또 다른 방법 (아마도 쉽게 쉽게)은 SVG 마커 아이콘 을 사용하여 입니다.그런 식으로 :

• 솔루션은 모든 장치 픽셀 밀도
를 지원합니다.
• 라이브러리를 패치 할 필요가 없습니다 (원인 할 수있는 모든 문제가있는 경우)
• 현재 브라우저 지원은 꽤 훌륭합니다 - Caniuse.com svg-img 통계

Answer 3

아이콘을 두 번 크기로 업로드하십시오.

m1.png = 53x53 (normal) 106x106 (retina)
m2.png = 56x56 (normal) 112x112 (retina) 
m3.png = 66x66 (normal) 132x132 (retina)
m4.png = 78x78 (normal) 156x156 (retina)
m5.png = 90x90 (normal) 180x180 (retina)

.

및 CSS에 추가 :

#map .cluster img {
    max-width: 100%;
}

.