2

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

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

コントロール コードを使用しており、これにカスタム マーカーを追加したいと考えています。コードを適用すると、マップが空白になり、壊れます。「add to map」と「bindpopup」のポジショニングに関係があるのか​​ どうかはわかりません。どんな助けでも素晴らしいでしょう。

コード：

[CLOUDMADE API KEY AND INFO HERE]

var officeIcon = L.icon({
    iconUrl: 'images/office1.png'
});

var london = L.marker([51.3512542357518,-0.461769104003906],{icon: officeIcon}).addTo(map).bindPopup('<b>Office Address</b>');


var cities = L.layerGroup([london]);

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(54.980000,-1.5975022315979004),
zoom: 10,
layers: [minimal, motorways, cities]
});

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

};

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

map.addControl(new MyControl());
L.control.layers(baseMaps, overlayMaps).addTo(map);
4

1 に答える 1

2

問題は、マップを定義する前にマーカーをマップに追加していることです。FirefoxにはFirebugを使用するか、Chromeで同等のものを使用することをお勧めします。そうすれば、コンソールを見ることができ、エラーが表示されます。

'Uncaught TypeError: Cannot call method 'addLayer' of undefined'
  L.Marker.L.Class.extend.addTo leaflet-src.js:2993
  addVehicleContentUI obelix.dev:1074
  (anonymous function) obelix.dev:718
  (anonymous function) obelix.dev:1292
  p.event.dispatch jquery-1.8.0.min.js:2
  g.handle.h

これは私にL.Markerを指摘し、あなたがまだマップを定義していないことに気づきました。問題は、マーカーをマップに追加するだけでなく、グループレイヤーにも追加することです。それをマップに追加しないでください（あなたがフォローしていたチュートリアルに従って）。したがって、コードを削除します。

.addTo(map)

から：

var london = L.marker([51.3512542357518,-0.461769104003906],{icon: officeIcon}).addTo(map).bindPopup('<b>Office Address</b>');

次の問題は、MyControlがコントロールではないことです。次の行をコメントアウトしました：

map.addControl(new MyControl());

あなたのコードスニペットから、あなたはcloudmadeのキーを持っていると思います。もしそうなら、それはうまくいくはずです。私はそれをローカルでテストしました、そしてすべてが良かったです。

Firefoxを使用している場合はFirebugを、Chromeを使用している場合はChromeと同等のものを入手することを強くお勧めします。コンソールを見ると、これらの問題がわかります。ブレークポイントを設定して、実行時にjavascriptをステップ実行することもできます。JavaScriptプログラミングIMHOのための非常に貴重なツール。

乾杯。

于 2012-11-17T06:15:56.907 に答える