Question

-update-我走得更近了，这差不多了，除了复选框无法打开和关闭pop = ups，并且标记不能操作复选框（我想我知道怎么排序）

我想创建选择复选框的地图标记，并让复选框打开标记上的弹出窗口。到目前为止，我在正确的位置有一个带有多个标记的地图，单击时弹出窗口保持打开状态，我已将标记链接到复选框，但是单击复选框后无法打开弹出窗口。

我希望标记保留在地图上，但是在单击或选中相应复选框时会更改外观。点击标记会更改其外观，并选中相应的复选框

任何指针将不胜感激。遵循的代码（如果认为必要的话）。

let checkboxStates

const locations = {"type": "FeatureCollection",
"features": [
{
 "type": "Feature",
 "geometry": {
    "type": "Point",
    "coordinates":  [ .575073660294429,50.8544412478922 ]
 },
 "properties": {
 "job":"J-33-V-1"
 }
},
{
 "type": "Feature",
 "geometry": {
    "type": "Point",
    "coordinates":  [.774006815158524, 50.9443943686903 ]
 },
 "properties": {
 "job":"J-33-V-2"
 }
}
]};

var map = L.map('map').setView([51.5074, 0.1278], 8)

        mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             attribution: '&copy; ' + mapLink + ' Contributors', maxZoom: 18,}).addTo(map)


var geojsonLayer = L.geoJSON(null,{
onEachFeature: 
 function (f, l) { 
 l.bindPopup(f.properties.job,{autoClose:false,closeOnClick:false})
    if ( document.getElementById(f.properties.job).checked) l.openPopup(geojsonLayer);
       else if( document.getElementById(f.properties.job).unchecked) l.closePopup(geojsonLayer);}
}).addTo(map)

function updateCheckboxStates() {
    checkboxStates = {
    jobs: []
  }

    for (let input of document.querySelectorAll('input')) {
    if(input.checked) {
        switch (input.className) {
        case 'job': checkboxStates.jobs.push(input.value); break
      }
    }
  }
}


for (let input of document.querySelectorAll('input')) {
  //Listen to 'change' event of all inputs
  input.onchange = (e) => {
    geojsonLayer.addData(locations)   
  }
}


/****** INIT ******/
updateCheckboxStates()
geojsonLayer.addData(locations)

通过复选框突出显示并在单击时激活复选框的标记

0 个答案: