angular-google-maps 라벨 오버랩 아이콘

Question

그래서 angular- google-maps 라이브러리로 각 어플리케이션을 생성했습니다. 여기에는 markerswithlabels 디렉토리가 포함되어 있으며 라벨이 다른 아이콘 위에 다른 라벨이 표시 될 수 있도록 아이콘이 겹칩니다. 레이블이. 지금은 내가 무슨 뜻인지 보여주기 위해 코드 펜을 만들었습니다

이 라벨과는 단 하나의 텍스트를 보여줍니다 그래서 뒤에 숨길 아이콘을 wan't : 내가 레이블을 설정하는 곳은 다음과 같습니다

options: { 
     labelContent : dist + '<br />Overlapse', 
     labelAnchor: "16 33", 
     labelClass: 'labelClass', 
     labelStyle: {opacity: 0.75}, 
     labelInBackground: true 
    }, 

을

그리고 이것은 사용자 markerswithlabels에 마커 디렉토리 알려줍니다 :

여기

<google-map ng-if="showloadedmap" center="map.center" draggable="true" maxZoom="map.maxZoom" 
     minZoom="map.minZoom" zoom="map.zoom" options="map.options" events="map.events"> 
     <markers models="map.markers" 
     doCluster="true" 
     coords="'self'" 
     icon="'icon'" 
     click="'onclicked'" 
        options="'options'" 
        idkey='id' 
     clusterOptions='map.clusterOptions' 
     isLabel='true'>  
     </markers> 

    </google-map> 

내가 미래의 독자를 위해이처럼 고정 된 codepen example

Answer 1

입니다 :

//1x1 img which is overlapsed by label 
    var iconimg = { 
     url: 'img/markers/'+value[8], // url 
     scaledSize: new google.maps.Size(1, 1), // size 
    }; 
    //icon as background image 
    var newstyle = { 
     'background-image':'url("img/markers/'+value[8]+'")', 
     'background-size': '36.5px 61px', 
     'background-position': 'top left', 
     'background-repeat': 'no-repeat' 
    } 


$scope.map.markers.push({ 
    id: value[3], 
    latitude: angular.fromJson(value[1]), 
    longitude: angular.fromJson(value[2]), 
    icon: iconimg, 
    title : value[0], 
    options: { 
     labelContent : dist + '<br />'+$filter('date')(date,'d-M'), 
     labelAnchor: "36 61", 
     labelClass: 'labelClass', 
     labelStyle: newstyle, 
     labelInBackground: false 
    } 
}); 

labelclass의 CSS의 내용

.labelClass { 
    padding-top:29px; 
    padding-left:2px; 
    color:#000; 
    font-family: 'open_sansregular'; 
    height:61px; 
    width:37px; 
    font-size:9px; 
    line-height: 12px; 
}