Question

我正在使用传单，经过大量研究，我仍然无法在地图上显示我的标记。

我尝试了所有可以找到的解决方案。甚至Leaflet建议的角度解决方法。现在，我设法获得了标记img，并带有正确的路径以呈现到html中，但是它仍然没有显示图像。换句话说，我找到了正确的路径，找到了图像，可以在控制台中看到所有内容，但是然后说无法加载图像，这很容易引起误解，因为图像肯定没有问题

下面是我的代码：

let markerIcon = L.icon({ iconUrl: 'src/assests/icons/marker.png'});
L.marker([48.208, 16.373], {
      icon: markerIcon,
      riseOnHover: true
}).addTo(map);

下面是浏览器中呈现的html的控制台，具有正确的路径和所有内容：

<img src="src/assests/icons/marker.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="" tabindex="0" style="transform: translate3d(659px, 207px, 0px); z-index: 207;">

我只想显示该标记！没有标记，我的整个项目将毫无用处。

Answer 1

您需要传递一个图标对象，该对象将定义标记图像的路径，如下所示：

icon = {
    icon: L.icon({
      iconSize: [ 25, 41 ],
      iconAnchor: [ 13, 0 ],
      // specify the path here
      iconUrl: './node_modules/leaflet/dist/images/marker-icon.png',
      shadowUrl: './node_modules/leaflet/dist/images/marker-shadow.png'
   })
};

然后是const marker = L.marker([51.5, -0.09], this.icon).addTo(map);

不需要在资产文件夹中包含标记的图像，因为它已经包含在Leaflet软件包中。

这是一个working demo，带有标记和使用最新角度版本的弹出窗口。

如何在Angular中显示传单标记？

1 个答案: