地圖佈局

我想顯示我的網頁上的地圖......對於這一點，我有以下代碼：地圖佈局

<!DOCTYPE html> 
<html lang="fr"> 
<!-- HEAD --> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Petites annonces</title> 
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
    <!-- CSS --> 
    <style> 
     <link href="https://unpkg.com/[email protected]/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>

不過這是結果：

我的代碼中缺少一些東西？我不明白是什麼問題...我有任何解決方案。

所以，如果您可以幫助我，請提前致謝。

來源

2017-03-06 Rudymil1

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

的 <style>內

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

來源

2017-03-06 15:25:34

太快了！非常感謝你，它的工作原理！ – Rudymil1

<link>標籤是造成問題。把它移到它外面解決了這個問題

<!DOCTYPE html> 
<html lang="fr"> 
<!-- HEAD --> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Petites annonces</title> 
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
    <!-- CSS --> 
    <link href="https://unpkg.com/[email protected]/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>

來源

2017-03-06 15:40:12 CodeFreak

回答

相關問題