リーフレット：マップの右端にアイコンマーカーが表示されない

Question

リーフレットマップにカスタムアイコンマーカーを配置しています。

マップが初めてロードされたとき、アイコンマーカーは座標指定の右側に表示されません。それは「移動」され、最小のアイコンが正しいポイントになるまでズームインします。何が間違っているのか不思議でした。

var map = L.map('map').setView([-36.60664, -72.10342], 4); 
 
\t \t map.options.minZoom = 4; 
 
\t \t map.options.maxZoom = 18; 
 

 
\t L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
 
\t \t attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
 
\t }).addTo(map); 
 

 
\t var LeafIcon = L.Icon.extend({ 
 
\t \t options: { 
 
\t \t \t //shadowUrl: 'leaf-shadow.png', 
 
\t \t \t iconSize:  [30, 30], 
 
\t \t \t //shadowSize: [50, 64], 
 
\t \t \t iconAnchor: [22, 94], 
 
\t \t \t //shadowAnchor: [4, 62], 
 
\t \t \t popupAnchor: [-3, -76] 
 
\t \t } 
 
\t }); 
 

 
\t 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);

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

<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

使用するアイコンは128×128です。 オプションで宣言したサイズの30x30にサイズを変更する必要があります。

カスタムアイコンを使用する場合は、iconAnchorとpopupAnchorの定義方法も理解する必要があります。あなたのケースでは

、可能な値は次のようになります。

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