[英]How to set marker icon in leaflet map?
我有我的組件 MAP,我使用傳單(不是反應傳單)。 我想設置一個標記。
這是我的組件的代碼。
import React from 'react';
import L from 'leaflet';
import '../../../../node_modules/leaflet/dist/leaflet.css';
import './map.scss';
export default class Map extends React.Component {
componentDidMount() {
this.map = L.map('map', {
center: [48.8762, 2.357909999999947],
zoom: 14,
zoomControl: true,
layers: [
L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',{
detectRetina: true,
maxZoom: 20,
maxNativeZoom: 17,
}),
]
});
L.marker([48.8762, 2.357909999999947],
{
draggable: true, // Make the icon dragable
title: 'Hover Text', // Add a title
opacity: 0.5} // Adjust the opacity
)
.addTo(this.map)
.bindPopup("<b>Paris</b><br>Gare de l'Est")
.openPopup();
L.circle([48.8762, 2.357909999999947], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(this.map);
};
render() {
return <div className="map" id="map" />
}
}
我添加了我們在文檔中描述的標記,但地圖中的結果不是默認圖標,它只是一個帶有細邊框的正方形。 我檢查了傳單中的 css-File。 該圖標位於圖像文件夾中,但不在可用地圖中。
有人可以幫忙或看看我的代碼有什么問題嗎?
這是一個眾所周知的 webpack css bundle 問題。 將標記圖標定義為
const markerIcon = L.icon({
iconSize: [25, 41],
iconAnchor: [10, 41],
popupAnchor: [2, -40],
// specify the path here
iconUrl: "https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png",
shadowUrl: "https://unpkg.com/leaflet@1.5.1/dist/images/marker-shadow.png"
});
並將其分配給L.marker
的 icon 屬性,如下所示:
L.marker(
[48.8762, 2.357909999999947],
{
draggable: true, // Make the icon dragable
title: "Hover Text", // Add a title
opacity: 0.5,
icon: markerIcon // here assign the markerIcon var
} // Adjust the opacity
)
.addTo(this.map)
.bindPopup("<b>Paris</b><br>Gare de l'Est")
.openPopup();
根據您的問題,我可以解釋您無法正確導入 CSS。
您可以通過編寫為傳單模塊導入 css
import 'leaflet/dist/leaflet.css';
有關詳細說明,您可以閱讀
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.