Я использую google-maps
в своем веб-приложении для отображения некоторых данных на карте с помощью пользовательских маркеров.Дело в том, что на карте есть несколько типов данных, каждый из которых представлен type
, который является числом.Для типа, равного 3
, я хочу сделать картинку круглой (применив ng-style
).Вот как я создаю маркеры на карте:
HTML:
<marker ng-repeat="pos in $ctrl.positions track by $index"
position="[{{ pos.lat + ',' + pos.lng }}]"
title="{{pos.text}}"
icon="{{ pos.icon }}"
on-click="$ctrl.showMarkerInfo({{$index}})"
ng-class="{{pos.type == 3 ? 'roundProfilePic': '' }}">
</marker>
roundProfilePic
фактически добавляется к объекту Marker
, но по какой-то странной причине пользовательские маркерыфактически переведено в div
s с тегами img
внутри, без отношения к Marker
, поэтому мой roundProfilePic
не влияет на фактическое изображение на карте. Вот как это выглядит:
<div style="position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;">
<div title style="width: 40px; height: 40px; overflow: hidden; position: absolute; opacity: 0; cursor: pointer; touch-action: none; left: -679px; top: 259px; z-index: 299;">
<img alt src="someLinkToTheImage" style="position: absolute; left: 0px; top: 0px; width: 40px; height: 40px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; opacity: 1;"
</div>
<div>
<img>
</div>
.
.
.
.
.
</div>
Как применить roundProfilePic
к тегам img
внутри этих div
s?