Cloudmade和Leaflet:多个自定义标记

时间:2012-11-19 13:17:55

标签: javascript maps leaflet cloudmade

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

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

我正在使用控制代码,我想为此添加MULTIPLE自定义市场。在应用代码时,地图变为空白,但是有一个标记可以使用。任何帮助或指导都会很棒。

这是我打破多个标记的当前代码:

我在加载时在控制台中出现错误:var officeoneIcon = new officeIcon({iconUrl:'images / office1.png'}),officeIcon未定义。

[CODE]

var officeoneIcon = new officeIcon({iconUrl: 'images/office1.png'}),
    officetwoIcon = new officeIcon({iconUrl: 'images/office2.png'}),
    officethreeIcon = new officeIcon({iconUrl: 'images/office3.png'});


var officeone = L.marker([lat,long],{icon: officeoneIcon}).bindPopup('<b>Office Address</b>');

var officetwo = L.marker([lat,long],{icon: officetwoIcon}).bindPopup('<b>Office Address</b>');

var officethree = L.marker([lat,long],{icon: officethreeIcon}).bindPopup('<b>Office Address</b>');


var cities = L.layerGroup([officeone, officetwo, officethree]);

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(lat,long),
zoom: 10,
scrollWheelZoom: true,
layers: [minimal, motorways, cities]
});

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

};

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

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

[/ CODE]

1 个答案:

答案 0 :(得分:0)

通过在iconUrl代码行上方添加"var officeIcon =L.icon;"来解决此问题。