Question

我正在尝试使用涉及Leaflet的API。我们的想法是将兴趣点放在地图上。

在这个小提琴中你可以看到我想要完成的任务：fiddle。我面临的问题是，当我尝试添加自定义图标时，缩放和锚定失败。出于某种原因，默认图标正确放置在地图上，我不知道为什么那些也不会失败。

除了这些部分之外，我的所有代码都与小提琴大致相同：

您可以在下面看到我如何制作自定义图标：

var waypoint = L.icon({
    iconUrl: 'waypoint.png',        
    //iconSize: [30, 30], // size of the icon       
    iconAnchor: [0, 0] // point of the icon which will correspond to marker's location      
});

在下面，您可以看到我如何在标记中添加图标：

L.marker(unproject(poi.coord), {
                    title: poi.name,
                    icon: waypoint
                }).addTo(map);

更新：下面你可以看到差异：

Image

我错过了什么？

Answer 1

您说您正在使用涉及Leaflet的API 。正如我在你的小提琴中看到的，一切都很好。如果你正在使用包装器API，那么这可能是你问题的原因。

Answer 2

（代表OP发布）

好的，我设法解决了。

这就是我做错了，我获取了外部资源（.js和.css）并将它们放置在我的项目中。当我在我的项目中添加两个这样的URL：

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5.1/leaflet.js" type="text/javascript"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5.1/leaflet.css" type="text/css">

一切都按预期工作。

使用Leaflet自定义标记

2 个答案: