Question

我想在我的网页上显示一张地图......为此，我有以下代码：

<!DOCTYPE html>
<html lang="fr">
<!-- HEAD -->
<head>
    <meta charset="UTF-8" />
    <title>Petites annonces</title>
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <!-- CSS -->
    <style>
        <link href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" rel="stylesheet">
        #title { text-align: center; }
        #mapid { margin-left: auto; margin-right: auto; height: 180px; }
    </style>
</head>
<!-- BODY -->
<body>
    <h1 id="title">Petites annonces</h1>

    <div id="mapid"></div>
    <!-- JAVASCRIPT -->
    <script type="text/javascript">
        var mymap = L.map('mapid').setView([46.62, 2.39], 4);
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
            maxZoom: 18,
            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>',
            id: 'mapbox.streets'
        }).addTo(mymap);
    </script>
</body>

但这是结果：

我的代码中缺少某些东西？我不明白是什么问题......我有任何解决方案。

所以，如果你可以帮助我，请提前感谢你。

Answer 1

从<link>中取出<style>元素。

<link href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" rel="stylesheet">
<style>
    #title { text-align: center; }
    #mapid { margin-left: auto; margin-right: auto; height: 180px; }
</style>

Answer 2

<link>内的

<style>标记导致了问题。把它移到它外面就解决了这个问题

<!DOCTYPE html>
<html lang="fr">
<!-- HEAD -->
<head>
    <meta charset="UTF-8" />
    <title>Petites annonces</title>
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <!-- CSS -->
    <link href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" rel="stylesheet">
    <style>

        #title { text-align: center; }
        #mapid { margin-left: auto; margin-right: auto; height: 180px; }
    </style>
</head>
<!-- BODY -->
<body>
    <h1 id="title">Petites annonces</h1>

    <div id="mapid"></div>
    <!-- JAVASCRIPT -->
    <script type="text/javascript">
        var mymap = L.map('mapid').setView([46.62, 2.39], 4);
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
            maxZoom: 18,
            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>',
            id: 'mapbox.streets'
        }).addTo(mymap);
    </script>
</body>

</html>

leafletjs的地图布局

2 个答案: