传单:图标标记未出现在地图的右侧 [英] 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>

推荐答案

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

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

如果要使用自定义图标，还必须了解定义了iconAnchor 和 popupAnchor .

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

这篇关于传单:图标标记未出现在地图的右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！