标记图标的标准不会出现在开放街道地图中

问题描述

目标:
使用并显示标记图标的标准,以便在打开的街道地图中显示位置。

问题:
我试图找到关于为什么它不显示开放街道地图标记图标标准的错误。

你知道它不显示标记图标的标准是什么吗?

信息:
*将 Angular 与传单一起使用
*我使用本教程是为了创建一个有角度的传单 (https://www.digitalocean.com/community/tutorials/angular-angular-and-leaflet )

堆叠闪电战:
https://stackblitz.com/edit/github-xq4xnn?file=src/app/app.component.ts

https://github-xq4xnn.stackblitz.io


map.component.html

<div class="map-container">
    <div class="map-frame">
        <div id="map"></div>
    </div>
</div>

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

@Component({
  selector: 'app-map',templateUrl: './map.component.html',styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  private map;

  constructor() { }

  ngOnInit(): void {
    this.initMap();
    //this.markerService.makeCapitalMarkers(this.map);
  }

  private initMap(): void {
    this.map = L.map('map',{
      center: [39.8282,-98.5795],zoom: 5
    });

    const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
      maxZoom: 19,attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });

    tiles.addTo(this.map);

    L.marker([51.5,-0.09]).addTo(this.map)
      .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

  }
}

map.component.css

.map-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 30px;
}

.map-frame {
  border: 2px solid black;
  height: 100%;
}

#map {
  height: 100%;
}

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)