Cloudmade and Leaflet: Multiple custom markers

问题

I have followed the leaflet tutorial on how to create Layer Control and the custom markers:

Markers:http://leafletjs.com/examples/custom-icons.html Control: http://leafletjs.com/examples/layers-control.html

I am using the control code and i would like to add MULTIPLE custom markear to this. When applying the code it the map goes blank however with one marker it works.Any help or guidance would be great.

This is my current code for multiple markers that breaks:

I do get an error in the console when it loads:var officeoneIcon = new officeIcon({iconUrl: 'images/office1.png'}), officeIcon is not defined.

[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:

This was resolved by adding "var officeIcon =L.icon;" above the iconUrl lines of code.

来源：https://stackoverflow.com/questions/13454619/cloudmade-and-leaflet-multiple-custom-markers

标签

javascript

maps

leaflet

cloudmade