Cloudmade和Leaflet:多个自定义标记 [英] Cloudmade and Leaflet: Multiple custom markers

问题描述

我遵循了有关如何创建图层控制和自定义标记的传单教程:

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

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

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

我正在使用控制代码，我想为此添加MULTIPLE自定义标记.应用代码时，地图会变成空白，但是只有一个标记就可以了.任何帮助或指导都将非常有用.

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:

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

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]

推荐答案

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

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

这篇关于Cloudmade和Leaflet:多个自定义标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！