我遵循了关于如何创建图层控制和自定义标记的传单教程:
标记:http://leafletjs.com/examples/custom-icons.html 控制:http: //leafletjs.com/examples/layers-control.html
我正在使用控制代码,我想为此添加多个自定义标记。应用代码时,地图会变为空白,但是使用一个标记它可以工作。任何帮助或指导都会很棒。
这是我当前的多个标记中断代码:
加载时控制台中确实出现错误:var officeoneIcon = new officeIcon({iconUrl: 'images/office1.png'}), officeIcon 未定义。
[代码]
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);
[/代码]