标记图标未显示在传单中 [英] marker icon isn't showing in Leaflet

问题描述

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

解决方案

尝试添加图标:

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

I 've put together a very simple React / Leaflet demo but the marker icon is not showing at all. Full running code is here.

Here's what I have in my componentDidMount method:

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

Basically, the popup is visible, but not the marker icon itself. I.e., here's what I see:

解决方案

Try to add an icon:

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

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

Perhaps you have some problems with the default one: https://leafletjs.com/reference-1.6.0.html#icon-default

这篇关于标记图标未显示在传单中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！