Question

我已经按照小册子教程了解如何创建图层控件和自定义标记：

标记：HTTP：//leafletjs.com/examples/custom-icons.html 控制：http://leafletjs.com/examples/layers-control.html

我正在使用控制代码，我想将自定义标记添加到此。应用代码时，地图变为空白并中断。我不确定它是否与“添加到地图”和“bindpopup”的定位有关。任何帮助都会很棒。

CODE：

[CLOUDMADE API KEY AND INFO HERE]

var officeIcon = L.icon({
    iconUrl: 'images/office1.png'
});

var london = L.marker([51.3512542357518,-0.461769104003906],{icon: officeIcon}).addTo(map).bindPopup('<b>Office Address</b>');


var cities = L.layerGroup([london]);

var minimal   = L.tileLayer(cloudmadeUrl, {styleId: 22677}),
midnight  = L.tileLayer(cloudmadeUrl, {styleId: 999}),
motorways = L.tileLayer(cloudmadeUrl, {styleId: 46561});

var map = L.map('map', {
center: new L.LatLng(54.980000,-1.5975022315979004),
zoom: 10,
layers: [minimal, motorways, cities]
});

var baseMaps = {
    "Minimal": minimal,
    "Night View": midnight,

};

var overlayMaps = {
    "Motorways": motorways,
    "Display Markers": cities
};

map.addControl(new MyControl());
L.control.layers(baseMaps, overlayMaps).addTo(map);

Answer 1

问题是您在定义地图之前将标记添加到地图中。我建议使用firebug for firefox或者等效的chrome。这样你可以看一下控制台，你会看到错误：

'Uncaught TypeError: Cannot call method 'addLayer' of undefined'
  L.Marker.L.Class.extend.addTo leaflet-src.js:2993
  addVehicleContentUI obelix.dev:1074
  (anonymous function) obelix.dev:718
  (anonymous function) obelix.dev:1292
  p.event.dispatch jquery-1.8.0.min.js:2
  g.handle.h

这使我指向L.Marker，这让我意识到你还没有定义地图。您遇到的问题是您将标记添加到地图并将其添加到组图层。只是不要将它添加到地图中（根据您所遵循的教程）。所以删除代码：

.addTo(map)

从：

var london = L.marker([51.3512542357518,-0.461769104003906],{icon: officeIcon}).addTo(map).bindPopup('<b>Office Address</b>');

接下来的问题是MyControl不是一个控件，我注释掉了以下几行：

map.addControl(new MyControl());

从你的代码片段中，我假设你有一个来自cloudmade的密钥。如果是这样，它应该工作正常。我在当地进行了测试，一切都很好。

如果你使用firefox，我强烈推荐使用firebug，如果你使用chrome，我强烈推荐使用chrome。查看控制台将向您显示这些问题，您甚至可以设置断点并在执行时逐步执行javascript。一个非常宝贵的javascript编程工具恕我直言。

干杯。

LEAFLET：图层控制教程中的自定义图像？

1 个答案: