时间戳

首页 > 解决方案 > 将默认蓝色标记更改为我自己的图标标记，mapbox angular

angular - 将默认蓝色标记更改为我自己的图标标记，mapbox angular

问题描述

我正在尝试将默认的蓝色标记更改为我自己的类型，我遇到了问题，因为文档中提到了更改多个标记，我将始终在我的地图中查看一个标记。有没有办法做到这一点？地图正在加载，但现在没有显示任何标记，所以我很接近，但没有雪茄。我想使用 ALARM_CENTER.svg 图标。

组件.ts：

createMap(lng: number, lat: number, zoom: number, createMarker: boolean) {
    this.mapa = new mapboxgl.Map({
      accessToken: environment.mapBox,
      container: 'mapElement',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [lng, lat], // starting position [lng, lat]
      zoom: zoom,
      attributionControl: false,
    });
    createMarker ? this.createMarker(lng, lat) : '';
  }

  createMarker(lng: number, lat: number) {
    var el = document.createElement('div');
    el.className = 'marker';
    new mapboxgl.Marker({element: "<div class='marker'>"}).setLngLat([lng, lat]).addTo(this.mapa);
 
  }

样式.css：

.marker {
  background-image: url("/assets/shopProtection/ALARM_CENTER.svg");
  background-size: cover;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

标签： angularmapboxmapbox-gl

解决方案

这是一个组合，我把css放在主要的style.css中，而不是component.css，这与惰性组件没有在component.css中加载样式有关。最终代码：

组件.ts

createMarker(lng: number, lat: number) {
    var el = document.createElement('div');
    el.className = 'marker';
    const marker = new mapboxgl.Marker(el).setLngLat([lng, lat]).addTo(this.mapa);
  }

样式.css：

.marker {
  background-size: contain;
  width: 50px;
  height: 50px;
  background-image: url("/assets/img/marker.svg");
  background-repeat: no-repeat;
}

推荐阅读