Измените синий маркер по умолчанию на мой собственный маркер значка, mapbox angular - PullRequest
Новая
       80

Измените синий маркер по умолчанию на мой собственный маркер значка, mapbox angular

0 голосов
/ 14 июля 2020

Я пытаюсь изменить синий маркер по умолчанию на свой собственный тип, у меня возникают проблемы, потому что в документации говорится об изменении нескольких маркеров, у меня всегда будет только один маркер, просматриваемый на моей карте. Как это сделать? Карта загружается, но теперь маркеров нет, так что я близко, но сигары нет. Я хочу использовать значок ALARM_CENTER.svg.

component.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);
 
  }

style. css: 

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

1 Ответ

0 голосов
/ 14 июля 2020

Это была комбинация вещей, я поместил css в основной стиль. css, а не компонент. css, что-то связано с ленивым компонентом, который не загружает стили в компонент. css. Окончательный код:

component.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);
  }

style. css: 

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