javascript - LEAFLET:图层控制教程中的自定义图像？

Question

我已按照有关如何创建图层控件和自定义标记的传单教程进行操作:

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

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

代码:

[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

问题是您在定义 map 之前将标记添加到 map 。我建议在 firefox 或 chrome 中使用 firebug。这样你就可以查看控制台并看到错误:

'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，这让我意识到您还没有定义 map 。您遇到的问题是您将标记添加到 map 以及将其添加到图层组。只是不要将其添加到 map 中(根据您所遵循的教程)。所以删除代码:

.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 的 key 。如果是这样，那么它应该可以正常工作。我在本地进行了测试，一切正常。

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

干杯。