谷歌角地图标签溢出图标

Sjoerd de Wit 发表于 Dev

舍尔德·德·威特

因此，我使用angular-google-maps库创建了一个角度应用程序，其中包括markerswithlabels目录，并且标签覆盖了图标，因此您可以在带有标签的另一个图标上方看到另一个标签。现在我不会将此标签和图标隐藏在其后面，因此它仅显示一个文本，

我创建了一支代码笔来显示我的意思：这是我设置标签的地方：

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的例子

舍尔德·德·威特

我为以后的读者修复了此问题：

   //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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。