Question

下面是我用于在浏览器中加载地图的HTML和JavaScript。我在Mabbox.org上创建了一张地图。所以地图的传单URL是：

https://api.mapbox.com/styles/v1/johnmichel/ciobach7h0084b3nf482gfvvr/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoiam9obm1pY2hlbCIsImEiOiJjaW9iOW1vbHUwMGEzdnJseWNranhiMHpxIn0.leVOjMBazNl6v4h9MT7Glw

现在我把这个URL放在一个名为init（）的Javascript函数中;我跟着这个http://leafletjs.com/examples/quick-start.html。但是当我加载HTML时，不会出现任何地图。你能帮帮我吗？

Javascript

function init(){

var map = L.map('map');

L.tileLayer('https://api.mapbox.com/styles/v1/johnmichel/ciobach7h0084b3nf482gfvvr/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoiam9obm1pY2hlbCIsImEiOiJjaW9iOW1vbHUwMGEzdnJseWNranhiMHpxIn0.leVOjMBazNl6v4h9MT7Glw', {
    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
}).addTo(map);

  map = L.map('map').setView([46.2, 2], 5);
}

HTML

<!DOCTYPE html>
<html>
<head>

    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="monstyle.css">
    <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css">
    <script src="leaflet/leaflet.js"></script>
    <script src="MonFichierJS.js"></script>
</head>
<body onload="init()">

<div id="map"></div>

</body>
</html>

CSS

body {
    padding: 0;
    margin: 0;
}
html, body, #map {
    height: 500px;
width: 500px;
}

Answer 1

问题出在Javascript中。下面是一个正确的JS代码

function init(){

var map = L.map('map').setView([46.2, 2], 5);

L.tileLayer('https://api.mapbox.com/styles/v1/johnmichel/ciobach7h0084b3nf482gfvvr/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoiam9obm1pY2hlbCIsImEiOiJjaW9iOW1vbHUwMGEzdnJseWNranhiMHpxIn0.leVOjMBazNl6v4h9MT7Glw', {
    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
}).addTo(map);

}

MapBox网址无效

1 个答案: