無法初始化Leaflet.draw工具欄

Question

我在初始化Leaflet.draw toolbar時遇到困難。我嘗試過使用各種示例中的代碼，但仍無法使工具欄顯示在我的地圖上。存在我的代碼在自己的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需要

• leaflet.css
• leaflet.draw.css
• leaflet.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/