Javascript/CSS未按预期工作，元素未显示/更新

yqkkidmi 于 2022-12-20 发布在 Java

关注(0)|答案(1)|浏览(160)

此脚本允许用户创建一个以标记为中心的圆，并可以交互式地更改圆的直径。下面的HTML中存在一个问题。
当我在浏览器（Chrome）中启动这个html时，范围栏和相关的填充框是唯一显示的元素。同样，当我使用范围栏更改值时，框中的值不会更新。
我认为这个问题与CSS和Javascript的集成有关。但我看不出哪里出了问题。

function map() {
    let set = 10;
    let zoom = 9;
    let circles;
    let entreprise = [43.600000, 1.433333];
    let mymap = L.map('mapid').setView(entreprise, zoom);

    let osmLayer = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
        maxZoom: 18
    });

    mymap.addLayer(osmLayer);
    L.marker(entreprise).addTo(mymap);

    // On retranscrit la valeur du input range dans le input Number (et inversement)
    $('.range').on('input', function() {
        set = $(this).val();
        $('.kilometres').val(set);
    });

    $('.kilometres').on('input', function() {
        set = $(this).val();
        $('.range').val(set);
    });

    circles = L.circle(entreprise, 1000*set, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(mymap);

    $( ".range, .kilometres" ).on('input', function() {
        if(mymap.hasLayer(circles))
            mymap.removeLayer(circles);

        circles = L.circle(entreprise, 1000*set, {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5
        }).addTo(mymap);
    });
}
    
map();

div.row {
   width: 700px;
   margin: 0 auto;
}

div > input {
   display: block;
   width: 300px;
   margin: 10px;
}

#mapid {
     height: 250px;
     width: 300px;
}

<div class="row">
  <div class="col-xs-6">
      <input type="number" class="kilometres" name="kilometres" min="0" max="100" placeholder="15" value="15" />
      <input type="range" class="range" name="range" min="0" max="100" step="1" value="15" />
  </div>
  <div class="col-xs-6">
      <div id="mapid"></div>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/74844326/javascript-css-not-working-as-expected-elements-not-displaying-updating

1条答案

按热度按时间

yquaqz181#

看起来你好像缺少一些脚本导入。你需要wrld.jsjQuery.js和leaflet.css才能使其工作。
试试看：

<!DOCTYPE html>
<html>
<head>
    
    <title>Circle variable</title>
    <meta charset="utf-8" />

    <!-- Import Leaflet.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css">
    
    <style>
         div.row {
             width: 700px;
             margin: 0 auto;
         }

         div > input {
             display: block;
             width: 300px;
             margin: 10px;
          }

          #mapid {
               height: 250px;
               width: 300px;
          } 
    </style>
    
</head>
<body>

  <div class="row">
      <div class="col-xs-6">
          <input type="number" class="kilometres" name="kilometres" min="0" max="100" placeholder="15" value="15" />
          <input type="range" class="range" name="range" min="0" max="100" step="1" value="15" />
      </div>
      <div class="col-xs-6">
          <div id="mapid"></div>
      </div>
  </div>

<!-- Import jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js">

<!-- Import Wrld 3d -->
<script type="text/javascript" src="https://unpkg.com/wrld.js@1.x.x">

<script>
function map() {
    let set = 10;
    let zoom = 9;
    let circles;
    let entreprise = [43.600000, 1.433333];
    let mymap = L.map('mapid').setView(entreprise, zoom);

    let osmLayer = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
        maxZoom: 18
    });

    mymap.addLayer(osmLayer);
    L.marker(entreprise).addTo(mymap);

    // On retranscrit la valeur du input range dans le input Number (et inversement)
    $('.range').on('input', function() {
        set = $(this).val();
        $('.kilometres').val(set);
    });

    $('.kilometres').on('input', function() {
        set = $(this).val();
        $('.range').val(set);
    });

    circles = L.circle(entreprise, 1000*set, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(mymap);

    $( ".range, .kilometres" ).on('input', function() {
        if(mymap.hasLayer(circles))
            mymap.removeLayer(circles);

        circles = L.circle(entreprise, 1000*set, {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5
        }).addTo(mymap);
    });
}
    
map();
</script>

</body>
</html>

赞(0）回复(0）举报 2022-12-20

我来回答

Javascript/CSS未按预期工作，元素未显示/更新

1条答案

相关问题

热门标签

最新问答