传单：图标标记未出现在地图的右侧答案

【问题标题】：Leaflet: Icon marker does not appear in the right point of the map传单：图标标记未出现在地图的右侧
【发布时间】：2017-02-18 03:03:55
【问题描述】：

我在传单地图中放置了一个自定义图标标记。

第一次加载地图时，图标标记不会出现在给定坐标的右侧。然后，如果您放大到最小值，则它会“移动”，该图标会出现在正确的位置。我想知道怎么了。

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>

【问题讨论】：

标签： javascript google-maps icons leaflet marker

【解决方案1】：

您使用的图标是 128x128。您必须将其调整为 30x30，这是您在选项中声明的大小。

如果要使用自定义图标，还必须了解iconAnchor 和popupAnchor 是如何定义的。

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

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

【讨论】：