Javascript 地图上没有可见的标记和弹出窗口

我正在使用ngx传单插件制作传单。我已经设置了基本层，并为

moplemapredy

事件添加了一个侦听器。在我的处理程序中，我尝试添加一个标记和一个自定义弹出窗口。处理程序的代码如下所示：

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

当我打开地图时，没有标记。我检查了控制台和编译日志，没有错误。我做错了什么

编辑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);*/
}
}

map-widget.component.html
map-widget.component.ts
从'@angular/core'导入{Component，OnInit，Input}；
从“传单”中输入*作为L；
@组成部分({
选择器：“sultana地图小部件”，
templateUrl:'./map widget.component.html'，
样式URL:['./map widget.component.css']
})
导出类MapWidgetComponent实现OnInit{
@输入标记：任意；
标记：数组=[]；
家庭合作社={
纬度：23.810331，
伦敦：90.412521
};
选择：任何；
层控制：任何；
构造函数（）{
}
恩戈尼尼特（）{
此选项={
图层：[
（如有）。蒂莱耶(
'https://stamen-tiles-{s} .a.ssl.fastly.net/terrain/{z}/{x}/{y}.{ext}'，
{
属性：“地图平铺依据，&mdash；地图数据&mdash；”，
子域：“abcd”，
最小缩放：0，
最大缩放：15，
分机：png
}
)
],
缩放：7，
中心：L.latLng（this.homecords.lat，this.homecords.lon）
};
this.layersControl={
基层：{
“开放式街道地图”：L.tileLayer(
“http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png”，
{maxZoom:15，属性：“”
),
“雄蕊地形”：这个.stamenMap（“地形”），
}
};
}
stamenMap（类型：字符串）{
返回（如有）。tileLayer(
`https://stamen-tiles-{s} .a.ssl.fastly.net/${type}/{z}/{x}/{y}.{ext}`，
{
属性：“地图平铺依据，&mdash；地图数据&mdash；”，
子域：“abcd”，
最小缩放：0，
最大缩放：15，
分机：png
}
);
}
初始化标记（映射：L.map）{
//resp Markers是一系列市场lat lng和resp信息
console.log（“设置标记”）；
let layers:Array=[]；
设rm=this.respmarks[0]；
设l=l.marker（l.latLng（rm.lat，rm.lon））.bindpoop（`${rm.num}`）；
这个。标记。推（l）；
//map.addLayer（L.marker（L.latLng（rm.lat，rm.lon））.addTo（map.bindpoop（`${rm.num}`））；
//设l=newl.Marker（l.latLng（rm.lat，rm.lon））.addTo（map.bindpoop（`${rm.num}'）.addTo（map）；
//地图。添加图层（l）；
/*对于（让rm知道这个.resp标记）{
设latLng=L.latLng（rm.lat，rm.lon）；
控制台日志（latLng）；
layers.push（新的L.Marker（latLng.bindpoop（`$`））；
}
L.layerGroup（layers）.addTo（map）*/
}
}

---

我不知道如何调试地图；我已经使用了firefox和chrome并检查了日志，没有任何错误

，因为在网页包绑定过程中出现了一些问题。您需要在创建标记时指定标记图标

因此，您需要使用L图标指定标记图标：

 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);

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

---

您是否调试并验证代码是否按预期使用有效的lat/long值运行？通常，我建议您将标记添加到绑定到[layers]的数组中，而不是直接添加到地图中。ngx传单演示中有一个基本示例：@重新放置lat lon值是正确的；我把他们从一个在线位置带到地理编码服务你是救世主！在过去的24小时里，你的第二次回答准确无误，如期解决了问题。谢谢！！！

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