На карте нет маркеров и всплывающих окон - PullRequest
Новая
       27

На карте нет маркеров и всплывающих окон

0 голосов
/ 03 апреля 2019

Я использую плагин ngx-leaflet для листовки.Я настроил базовые слои и добавил слушателя для события leafletMapReady.В своем обработчике я попытался добавить маркер и пользовательское всплывающее окно.Код для обработчика приведен ниже: 

initMarkers(map: L.Map) {
    let m = this.markers[0];
    L.marker(L.latLng(m.lat, m.lon)).addTo(map).bindPopup(`<b style='color: red'>${m.num}</b>`).addTo(map);
}

, где m - это объект {lat, lon, num}.В моем HTML у меня есть: 

<div style="height: 550px"
    leaflet
    [leafletOptions]="options"
    [leafletLayersControl]="layersControl"
    (leafletMapReady)="initMarkers($event)"
></div>

Когда я открываю свою карту, маркеров нет.Я проверил журналы консоли и компиляции, и ошибок не было.Что я делаю неправильно?

РЕДАКТИРОВАТЬ 1

Следуя предложению @reblace, я попытался пометить маркеры как отдельный массив.Вот мой код: 

map-widget.component.html

<div style="height: 550px"
   leaflet
   [leafletOptions]="options"
   [leafletLayersControl]="layersControl"
   [leafletLayers]="markers"
   (leafletMapReady)="initMarkers($event)"
></div>



map-widget.component.ts

import { Component, OnInit, Input } from '@angular/core';
import * as L from 'leaflet';

@Component({
   selector: 'sultana-map-widget',
   templateUrl: './map-widget.component.html',
   styleUrls: ['./map-widget.component.css']
})
export class MapWidgetComponent implements OnInit {

   @Input() respMarkers: any;

   markers: Array<L.Layer> = [];
   homeCoords = {
     lat: 23.810331,
     lon: 90.412521
   };

  options: any;
  layersControl: any;

  constructor() { 
  }

  ngOnInit() {
     this.options = {
     layers: [
        (L as any).tileLayer(
           'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.{ext}',
      {
        attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: 'abcd',
        minZoom: 0,
        maxZoom: 15,
        ext: 'png'
      }
    )
  ],
  zoom: 7,
  center: L.latLng(this.homeCoords.lat, this.homeCoords.lon)
};
this.layersControl = {
  baseLayers: {
    "Open Street Map": L.tileLayer(
      "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      { maxZoom: 15, attribution: '' }
    ),
    "Stamen Terrain": this.stamenMap('terrain'),
  }
};
}

stamenMap(type: string) {
   return (L as any).tileLayer(
     `https://stamen-tiles-{s}.a.ssl.fastly.net/${type}/{z}/{x}/{y}.{ext}`,
     {
       attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: 'abcd',
        minZoom: 0,
        maxZoom: 15,
        ext: 'png'
      }
   );
 }
 initMarkers(map: L.Map) {
   // respMarkers is an array of market lat-lng and resp info
   console.log('Setting up markers');
   let layers: Array<L.Layer> = [];
   let rm = this.respMarkers[0];
   let l = L.marker(L.latLng(rm.lat, rm.lon)).bindPopup(`<b style='color: red; background-color: white'>${rm.num}</b>`);
   this.markers.push(l);
   //map.addLayer(L.marker(L.latLng(rm.lat, rm.lon)).addTo(map).bindPopup(`<b style='color: red'>${rm.num}</b>`));
   //let l = new L.Marker(L.latLng(rm.lat, rm.lon)).addTo(map).bindPopup(`<b style='color: red'>${rm.num}</b>`).addTo(map);
  //map.addLayer(l);
  /*for(let rm of this.respMarkers) {
     let latLng = L.latLng(rm.lat, rm.lon);
      console.log(latLng);
      layers.push(new L.Marker(latLng).bindPopup(`$`));
  }
  L.layerGroup(layers).addTo(map);*/
}
}

Я не знаю, как я могу отладить карту;Я использовал и Firefox и Chrome и проверил журналы, и нет никаких ошибок

1 Ответ

1 голос
/ 03 апреля 2019

Из-за некоторых проблем, которые возникают при комплектации веб-пакетов, вам необходимо указать значок маркера при создании маркеров.

, поэтому вам нужно указать значок маркера, используя L.icon: 

 markerIcon = {
    icon: L.icon({
      iconSize: [25, 41],
      iconAnchor: [10, 41],
      popupAnchor: [2, -40],
      // specify the path here
      iconUrl: "https://unpkg.com/leaflet@1.4.0/dist/images/marker-icon.png",
      shadowUrl: "https://unpkg.com/leaflet@1.4.0/dist/images/marker-shadow.png"
    })
  };

, а затем, например, создать маркеры, передав в качестве второго аргумента markerIcon: 

L.marker([this.homeCoords.lat, this.homeCoords.lon], this.markerIcon)
      .addTo(this.map)
      .bindPopup(popupInfo);

Одновременно вы добавляете маркер на карту и привязываете всплывающее окно

Демо

...