角谷歌地圖標籤重疊圖標

Question

所以我創建了角谷歌地圖庫，其中包括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; 
}