Question

我是Django的新手，而且我为这个问题苦苦挣扎了好几个星期。我的模板/ html页面可以与传单一起正常工作，但是当我在Django上运行模板时，它不会加载地图（geoJson文件）。我试过看所有的教程，但是没有运气。谁能帮忙吗？我上传的图片仅使用传单和html就可以了，但是在Django服务器上却是空白。

下面是我的代码：

[![<!DOCTYPE html>
<html>
 <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content = "width=device-width,initial-scale=1"/>
     <title>
        Map Visualization
    </title>
     <!-- Leaflet -->
     <link rel= "stylesheet" href="../../leaflet/leaflet.css"/>
     <script src = "../../leaflet/leaflet.js"></script>
     <script src ="../data/countries.geojson"></script>
     <style type = "text/css">
      #map {
          height : 800px; 
          width: 70%;
          align: left
          } 

      #filter {
          height:800px;
          width: 20%
          align: right
          }
     </style>

 </head>
  <body>  
      <h1 style="color:green;"> Map Visualization </h1>
      <div id="map"></div>


      <script>
         function getStateColor(stateShade){
             if (stateShade =="colored-state"){
                 return '#6666ff';
             }else if(stateShade!="non-colored-state"){
                 return '#D3D3D3';
             }       
         }

         function countriesStyle(feature){
             return {
                 fillColor : getStateColor(feature.properties.shade),
                 weight : 2,
                 opacity : 1,
                 color: 'white',
                 dashArray : 2.5,
                 fillOpacity :0.7
             }
         }

         var map = L.map('map').setView(\[80, 30\], 19)
         var countriesLayer = L.geoJson(
         countries,
         {style :  countriesStyle}
         ).addTo(map);
         map.fitBounds(countriesLayer.getBounds());  

         var point1 =\[44.066803,-93.533061\];
         var point2 = \[43.064,-89.5347\];

         var marker1 = L.marker(point1).addTo(map).bindPopup("<p>State: MN" );
         var marker2 = L.marker(point2).addTo(map).bindPopup("<p>State:WI" );

      </script> 
  </body> 

</html>][1]][1]

使用Django和Leaflet

0 个答案: