因此,我使用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>
我为以后的读者修复了此问题:
//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] 删除。
我来说两句