>

Google지도 버전 3 API 및 Google지도 마커를 사용하고 있습니다. 마커가 서로 가까워지면 라벨이 겹치며 불량 해 보입니다. 마커 레이블에 배경색을 주려고했지만 Google지도 마커 레이블에 배경색 속성이없는 것 같습니다. MarkerWithLabel API를 사용해 보았지만 Google지도 귀찮은 Marker Label과 비교할 때 1000 개의 마커가 있으면 렌더링 속도가 느려졌습니다. 나는 js 바이올린을 포함시켰다. 누구든지 도와주세요?

https://jsfiddle.net/dcvc99qz/12/

function initMap() {
    var pointA = new google.maps.LatLng(51.2750, 1.0870),
        pointB = new google.maps.LatLng(51.2750, 0.8140),
        myOptions = {
            zoom: 5,
            center: pointA,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
        markerA = new google.maps.Marker({
            position: pointA,
            title: "point A",
            label: "AA",
            map: map
        }),
        markerB = new google.maps.Marker({
            position: pointB,
            title: "point B",
            label: "BB",
            map: map
        });
}
initMap();


  • 답변 # 1

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

    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/

관련 자료

  • 이전 multithreading - objective-c - 추가 객체없이 nsthread를 함수 또는 블록과 함께 사용
  • 다음 .net - C #에서 추상 정적 메서드를 사용할 수없는 이유는 무엇입니까?