두 마커가 서로 가까이있을 때 마커 레이블이 겹칩니다 Google지도 마커에 배경색을 부여하는 방법은 무엇입니까?

마커는 이미지 일 뿐이며 배경색 만 변경할 수 없으며 새 아이콘을 정의해야합니다. 먼저 올바른 색상으로 새로운 투명 이미지를 준비하십시오. 그런 다음 새 아이콘 정의를 만드십시오.

var icons = {
  green: {
      // link to an image, use https if original site also uses https
      url: 'https://i.imgur.com/5Yd25Ga.png',
      // set size of an image
      size: new google.maps.Size(22, 40),
      // if an image is a sprite, set its relative position from 0, 0
      origin: new google.maps.Point(0, 0),
      // part of an image pointing on location on the map
      anchor: new google.maps.Point(11, 40),
      // position of text label on icon
      labelOrigin: new google.maps.Point(11, 10)
      },
  red: {
      // ...
      }
};

아이콘 속성 문서

새 마커를 추가 할 때 아이콘을 정의 된 아이콘 중 하나로 설정하십시오.

markerB = new google.maps.Marker({
    position: pointB,
    title: "point B",
    label: "BB",
    icon: icons.green,
    map: map
});

점이 서로 가까이 있으면 텍스트 레이블이 겹치는 것을 알 수 있습니다. 수정하려면 zIndex 를 늘리십시오.  모든 마커에.

markerA = new google.maps.Marker({
    position: pointA,
    title: "point A",
    label: "AA",
    zIndex: 1000,
    icon: icons.red,
    map: map
});
markerB = new google.maps.Marker({
  position: pointB,
  title: "point B",
  label: "BB",
  zIndex: 1001,
  icon: icons.green,
  map: map
});

전체 작업 예 : jsfiddle.net/yLhbxnz6/