javascript - 无法初始化 Leaflet.draw 工具栏

Question

我在初始化 Leaflet.draw toolbar 时遇到困难。我已尝试使用各种示例中的代码，但仍然无法让工具栏显示在我的 map 上。我的代码存在于其自己的 .js 文件中，如下所示:

function main() {

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map', {
    drawControl: true
}).setView([35.110756 , -120.591667], 14);

// add an OpenStreetMap tile layer
L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiemFjaHJvYmluc29uIiwiYSI6IjZXWDh0enMifQ.P_x5U3esb8BJM9apOhn4Kg', {
    attribution: '© Mapbox © OpenStreetMap © DigitalGlobe'
}).addTo(map);


// Initialise the FeatureGroup to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw({
    position: 'topleft',
    draw: {
        marker: true
    },
    edit: {
        featureGroup: drawnItems
    }
});
map.addControl(drawControl);
    
map.on('draw:created', function(e){
    var type = e.layerType,
        layer = e.layer;
    
    if (type === 'marker'){
        layer.bindPopup('A popup!');
    }
    
    drawnItems.addLayer(layer);
});

}

window.onload = main;

Answer 1

确保您复制了所有必需的外部 .js 文件。Leaflet.draw需要

• 传单.css
• leaflet.draw.css
• 传单.js
• leaflet.draw.js

HTML:

<div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>

脚本:

function main() {

  // create a map in the "map" div, set the view to a given place and zoom
  var map = L.map('map', {
    drawControl: true
  }).setView([35.110756, -120.591667], 14);

  // add an OpenStreetMap tile layer
  L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiemFjaHJvYmluc29uIiwiYSI6IjZXWDh0enMifQ.P_x5U3esb8BJM9apOhn4Kg', {
    attribution: '© Mapbox © OpenStreetMap © DigitalGlobe'
  }).addTo(map);


  // Initialise the FeatureGroup to store editable layers
  var drawnItems = new L.FeatureGroup();
  map.addLayer(drawnItems);


  map.on('draw:created', function(e) {
    var type = e.layerType,
      layer = e.layer;

    if (type === 'marker') {
      layer.bindPopup('A popup!');
    }

    drawnItems.addLayer(layer);
  });
}
window.onload = main();

http://jsfiddle.net/silverhawk/dw9jok46/