标记图标未显示在传单中

Question

我已经制作了一个非常简单的 React / Leaflet 演示，但是标记图标根本没有显示。完整的运行代码在这里。

这是我的componentDidMount方法中的内容：

componentDidMount() {
this.map = L.map("map-id", {
  center: [37.98, 23.72],
  zoom: 12,
  zoomControl: true
});

const mapboxAccessToken =
  "pk.eyJ1IjoibXBlcmRpa2VhcyIsImEiOiJjazZpMjZjMW4wOXJzM2ttc2hrcTJrNG9nIn0.naHhlYnc4czWUjX0-icY7Q";
L.tileLayer(
  "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
  {
    attribution:
      'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 25,
    id: "mapbox/streets-v11",
    accessToken: mapboxAccessToken
  }
).addTo(this.map);

L.marker([37.98, 23.72])
  .addTo(this.map)
  .bindPopup("a marker")
  .openPopup();
}

基本上，弹出窗口是可见的，但不是标记图标本身。即，这是我所看到的：

Answer 1

尝试添加一个图标：

const myIcon = L.icon({
   iconUrl: 'myIcon.png',
   // ...
});

L.marker([37.98, 23.72], {icon: myIcon})
  .addTo(this.map)

也许您对默认的有一些问题：https://leafletjs.com/reference-1.6.0.html#icon-default

Answer 2

我正在使用反应传单。这是我如何做到的。

import markerIconPng from "leaflet/dist/images/marker-icon.png"
import {Icon} from 'leaflet'

然后，稍后，在 MapContainer 中：

<Marker position={[lat, lng]} icon={new Icon({iconUrl: markerIconPng, iconSize: [25, 41], iconAnchor: [12, 41]})} />