Leaflet: Icon marker does not appear in the right point of the map

问题

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>

回答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],

来源：https://stackoverflow.com/questions/42310615/leaflet-icon-marker-does-not-appear-in-the-right-point-of-the-map

标签

javascript

google-maps

icons

leaflet

marker