Question

我是Leaflet的新手，并按照教程设置它，我没有加载地图的问题。当我尝试通过外部JS文件运行脚本而不是将脚本粘贴到HTML标记内时，问题就开始了。所以现在我不能让它像这样工作： HTML：

<head>
    <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css"/>
    <script type="text/javascript" src="leaflet/leaflet.js"></script>
    <link rel="stylesheet" type="text/css" href="src/style.css"/>
    <script type="text/javascript" src="src/javascript.js"></script>
</head>
<body>
    <div id="mapid"></div>
</body>

使用Javascript：

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

document.getElementById("mapid").onload = function loadMap(){
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZGlvZ204MDAiLCJhIjoiY2o5aGRxY3B5MGdyZTMzczJvNm95NHAxeSJ9.6M_vVT8BcyJay_acp-eEXA', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'your.mapbox.access.token'
    }).addTo(mymap);
};

在JS文件中，我尝试在没有div元素的onLoad（）的情况下加载它，并尝试使用它，如您在示例中所看到的，但它们都没有工作。甚至可以像这样加载传单地图吗？

感谢您的时间

Answer 1

onload元素上不存在div事件。

GlobalEventHandlers mixin的onload属性是Window，XMLHttpRequest，element等的load事件的事件处理程序，它在资源加载时触发。

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

在你的情况下，我会抓住onload上的document.body：

document.body.onload = function () {
    // Do stuff...
};

可以在外部JS文件上加载Leaflet吗？

1 个答案: