0

レイヤー コントロールとカスタム マーカーの作成方法に関するリーフレット チュートリアルに従いました。

マーカー: http://leafletjs.com/examples/custom-icons.html コントロール: http://leafletjs.com/examples/layers-control.html

私は制御コードを使用しており、これに複数のカスタム マーカーを追加したいと考えています。コードを適用すると、マップが空白になりますが、1 つのマーカーで機能します。ヘルプやガイダンスは素晴らしいでしょう。

これは、壊れる複数のマーカーの現在のコードです。

ロード時にコンソールにエラーが表示されます: var officeoneIcon = new officeIcon({iconUrl: 'images/office1.png'}), officeIcon is not defined.

[コード]

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);

[/コード]

4

1 に答える 1

0

これは"var officeIcon =L.icon;"、コードの iconUrl 行の上に追加することで解決されました。

于 2012-11-19T14:46:50.530 に答える