L未定义错误，带有Leaflet
L未定义错误，带有Leaflet
提问于 2017-06-11 09:23:24
我正在尝试设置传单，并在他们的网站上关注quick start guide。但是，我一直收到一个错误...
Uncaught ReferenceError: L is not defined
at initmap (main.js:10)
at main.js:6这看起来像是一个进口问题，但我被卡住了。我已经尝试使用他们的教程中提供的导入...
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
crossorigin=""/>和
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"
integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="
crossorigin=""></script>但是没有运气..。
我尝试下载这个库，并将其添加到我的项目中，如下所示……
然后从那里导入，就像……
'<script src="js/leaflet/leaflet.js"></script>'
'<script src="js/leaflet/leaflet.js"></script>'但是仍然会得到相同的错误。
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; }回答 3
Stack Overflow用户
回答已采纳
发布于 2017-06-11 09:33:12
切换两个脚本标记main.js和leaflet.js的顺序。
基本上，您是在实例化leaflet.js之前实例化main.js，因此在main.js的运行时不存在L。
<script src="js/leaflet/leaflet.js"></script>
<script src="js/main.js"></script>Stack Overflow用户
发布于 2019-04-25 01:00:36
我正在使用带有reactjs的mapbox，而不是直接使用leaflet，在我的例子中，我能够通过简单地从窗口变量中获得错误消息：L is not defined no-undef：
var L = window.L;Stack Overflow用户
发布于 2021-05-06 16:46:40
我也有一个关于L的错误，但在本例中错误是在
<script src="./leaflet/dist/leaflet.js"></script>
我正在写：<script type="module" src="./leaflet/dist/leaflet.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44479562
复制相关文章
相似问题
腾讯云开发者
