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

Question

该脚本使用户能够创建一个以标记为中心的圆，并可以交互地更改圆的直径。 下面的 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>

Answer 1

看起来好像您缺少一些脚本导入。 你需要wrld.js jQuery.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>

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

问题描述

1 个解决方案

解决方案1
0 2022-12-18 22:45:12

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

问题描述

1 个解决方案

解决方案1 0 2022-12-18 22:45:12

解决方案1
0 2022-12-18 22:45:12