Leaflet：圖標標記未出現在地圖的右側

Question

我在傳單地圖中放置了一個自定義圖標標記。

第一次加載地圖時，圖標標記不會出現在右側給定的坐標中。 它被“移動”，然后，如果你放大直到最小圖標出現在正確的點。 我想知道什么是錯的。

 var map = L.map('map').setView([-36.60664, -72.10342], 4); map.options.minZoom = 4; map.options.maxZoom = 18; L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); var LeafIcon = L.Icon.extend({ options: { //shadowUrl: 'leaf-shadow.png', iconSize: [30, 30], //shadowSize: [50, 64], iconAnchor: [22, 94], //shadowAnchor: [4, 62], popupAnchor: [-3, -76] } }); var myIcon = new LeafIcon({iconUrl: 'http://icons.veryicon.com/128/System/Small%20%26%20Flat/map%20marker.png'}); L.marker([-33.4247, -70.67877], {icon: myIcon}).bindPopup("Parque Fluvial Renato Poblete").addTo(map); 

  #map { width: 100%; height: 600px; } 

 <link href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" rel="stylesheet"/> <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> <div id='map'></div> 

Answer 1

您使用的圖標是128x128。 您必須將其大小調整為30x30，這是您在選項中聲明的大小。

如果要使用自定義圖標，還必須了解如何定義iconAnchor和popupAnchor 。

在您的情況下，可能的值可能是：

iconSize:    [30, 30],
iconAnchor:  [15, 30],
popupAnchor: [0, -25],