web-dev-qa-db-fra.com

L n'est pas une erreur définie avec Leaflet

J'essaie de configurer le dépliant et de suivre le guide de démarrage rapide sur leur site. Cependant, je reçois toujours une erreur de ...

Uncaught ReferenceError: L is not defined
at initmap (main.js:10)
at main.js:6

Cela semble être un problème d'importation, mais je suis bloqué. J'ai essayé d'utiliser les importations fournies sur leur tutoriel ...

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
   crossorigin=""/>

et

 <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="
   crossorigin=""></script>

Mais pas de chance ...

J'ai essayé de télécharger la bibliothèque et de l'ajouter à mon projet comme ça ... enter image description here

Et puis importer à partir de là comme ....

'<script src="js/leaflet/leaflet.js"></script>'
'<script src="js/leaflet/leaflet.js"></script>'

Mais obtenez toujours la même erreur.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--Stylesheets-->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="js/leaflet/leaflet.css">
    <!--Scripts-->
    <script src="js/main.js"></script>
    <script src="js/leaflet/leaflet.js"></script>
</head>
<h1>State Capitals</h1>
<!--State Form-->
<div class="form-group">
    <label for="state" class="col-sm-2 control-label">State</label>
    <div class="col-sm-10">
        <select class="form-control" id="state" name="state">
            <option value="">N/A</option>
            <option value="AK">Alaska</option>
            <option value="AL">Alabama</option>
            <option value="AR">Arkansas</option>
            <option value="AZ">Arizona</option>
            <option value="CA">California</option>
            <option value="CO">Colorado</option>
            <option value="CT">Connecticut</option>
            <option value="DC">District of Columbia</option>
            <option value="DE">Delaware</option>
            <option value="FL">Florida</option>
            <option value="GA">Georgia</option>
            <option value="HI">Hawaii</option>
            <option value="IA">Iowa</option>
            <option value="ID">Idaho</option>
            <option value="IL">Illinois</option>
            <option value="IN">Indiana</option>
            <option value="KS">Kansas</option>
            <option value="KY">Kentucky</option>
            <option value="LA">Louisiana</option>
            <option value="MA">Massachusetts</option>
            <option value="MD">Maryland</option>
            <option value="ME">Maine</option>
            <option value="MI">Michigan</option>
            <option value="MN">Minnesota</option>
            <option value="MO">Missouri</option>
            <option value="MS">Mississippi</option>
            <option value="MT">Montana</option>
            <option value="NC">North Carolina</option>
            <option value="ND">North Dakota</option>
            <option value="NE">Nebraska</option>
            <option value="NH">New Hampshire</option>
            <option value="NJ">New Jersey</option>
            <option value="NM">New Mexico</option>
            <option value="NV">Nevada</option>
            <option value="NY">New York</option>
            <option value="OH">Ohio</option>
            <option value="OK">Oklahoma</option>
            <option value="OR">Oregon</option>
            <option value="PA">Pennsylvania</option>
            <option value="PR">Puerto Rico</option>
            <option value="RI">Rhode Island</option>
            <option value="SC">South Carolina</option>
            <option value="SD">South Dakota</option>
            <option value="TN">Tennessee</option>
            <option value="TX">Texas</option>
            <option value="UT">Utah</option>
            <option value="VA">Virginia</option>
            <option value="VT">Vermont</option>
            <option value="WA">Washington</option>
            <option value="WI">Wisconsin</option>
            <option value="WV">West Virginia</option>
            <option value="WY">Wyoming</option>
        </select>
    </div>
</div>
<!--Map-->
<div id="mapid"></div>
<body>

</body>
</html>

Javascript

var map;
var ajaxRequest;
var plotlist;
var plotlayers=[];

initmap();

function initmap() {
    // set up the map
    map = new L.Map('map');

    // create the tile layer with correct attribution
    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
    var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 12, attribution: osmAttrib});

    // start the map in South-East England
    map.setView(new L.LatLng(51.3, 0.7),9);
    map.addLayer(osm);
}

CSS

h1{
    text-align: center;
}

.form-group {
    width: 700px;
    height: 10%;
    border: 1px solid #c3c3c3;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
}
#mapid { height: 180px; }
javascripthtmlcssleaflet
7
Carson

Changez l'ordre des deux balises de script main.js et leaflet.js.

Fondamentalement, vous instanciez main.js avant que leaflet.js n'ait été instancié et donc L n'existe pas au moment de l'exécution pour main.js.

 <script src="js/leaflet/leaflet.js"></script>  
 <script src="js/main.js"></script>
12
Shadowfool

J'utilise mapbox avec reactjs et n'utilise pas directement le dépliant, et dans mon cas j'ai pu résoudre le message d'erreur: L is not defined no-undef en le récupérant simplement à partir des variables de la fenêtre:

var L = window.L;
0
mruanova