标记周围的角度2/4地图框半径

时间:2017-06-07 12:33:35

标签: angular typescript mapbox mapbox-gl

是否有人知道是否可以使用angular2-mapbox在标记周围添加圆/半径?

我知道它不可能开箱即用,但也许这并不是什么大不了的事情吗?

非常欢迎任何建议。

<mapbox [center]="[-5.646973, 52.087483]">
<mapbox-marker
    *ngFor="let marker of map.markers"
    flyTo="16"
    [image]="marker.image"
    [coordinates]="marker.coordinates"
    [popup]="marker.popup"
    [data]="marker.data"
    (click)="markerClicked($event)">
</mapbox-marker>

链接到回购:repo

我猜他们支持这一切。

1 个答案:

答案 0 :(得分:1)

mapbox中的标记为HTML DOM,因此您可以使用CSS来设置标记样式(即不是特定于mapbox角度组件库)。

为此,请在CSS中使用className .marker指定并应用所需的CSS样式。

示例

.marker {
  border-radius: 50%;
  border: 1px solid #f00;
}

假设您只想自己创建一个CSS圈子

<强>圆

.marker {
  border-radius: 50%;
  background-color: red;
  height: 10px;
  width: 10px
}

你可以使用伪选择器在之后创建一个圆形元素并相应地定位。

<强>伪

.marker:after {
  content: "";
  display: block;
  border-radius: 50%;
  background-color: red;
  height: 10px;
  width: 10px
}