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

Question

我已按照传单教程了解如何创建图层控制和自定义标记：

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

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

代码：

[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());

根据您的代码 sn-p，我认为您有来自 cloudmade 的密钥。如果是这样，那么它应该可以正常工作。我在本地测试过，一切都很好。

如果您使用的是 firefox，我强烈建议您使用 firebug；如果您使用的是 chrome，我强烈建议您使用 chrome。查看控制台将向您展示这些问题，您甚至可以设置断点并在 javascript 执行时单步执行。恕我直言，JavaScript 编程的宝贵工具。

干杯。