Question

我正在使用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，并检查了日志，没有错误

Answer 1

由于在Webpack捆绑过程中会出现一些问题，因此在创建标记时需要指定标记图标。

因此您需要使用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);

同时将标记添加到地图并绑定弹出窗口

Demo

在地图上看不到标记和弹出窗口

1 个答案: