Leaflet：图标标记未出现在地图的右侧

Question

I am placing a custom icon marker in a leaflet map.

The first time the map is loaded, the icon marker does not appear in the right given coordenates. It's "moved", then, if you zoom in until the minimum the icon appers in the right point. I was wondering what's wrong.

 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

The icon you use is 128x128. You have to resize it to 30x30 which is the size you declare in your options.

If you want to use a custom icon, you also have to understand how iconAnchor and popupAnchor are defined.

In your case, possible values could be:

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