传单：图标标记未出现在地图的正确位置

Question

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

第一次加载地图时，图标标记未出现在给定坐标的右侧。它是 "moved"，然后，如果您放大到最小图标出现在正确的位置。我想知道怎么了。

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 and popupAnchor是如何定义的。

对于您的情况，可能的值可能是：

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

传单：图标标记未出现在地图的正确位置

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

javascript

icons

google-maps

marker

leaflet