如何将对象中的文本分配给具有相同索引的标记并在单击相关标记后显示相关文本？（Openlayers贴图）

Question

我使用 OpenLayers 地图，我想在点击标记后从 var informations 中获取一些文本。我想我需要有 "general" 关于循环中单击的功能，因为我需要为每个索引 [i] 做它。但是如果我点击某个标记，我看不到任何信息。

我试图在 console.table(window.phpdata.markers) 之前将 "general" 功能下移。当我运行它时，我可以在单击每个标记后看到 "informations" 的最后文本 --> 从数据库获取数据没有任何问题。

（这不是必需的结果，因为我不想看到最后一个标记。我想从相关标记的信息中查看相关文本。因此具有相同的索引 [i]。

这个结果怎么办？谢谢

Object.defineProperty(window.phpdata, "markers", {value: <?php echo !empty($list) ? json_encode($list) : 'null'; ?>, writable: false, configurable: false});
var base = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

var map = new ol.Map({
    target: 'map',
    layers: [base],
    view: new ol.View({
        center: ol.proj.fromLonLat([-74.0061,40.712]), zoom: 2
    })
});

var vectors = new ol.source.Vector({});

if(window.phpdata.markers && window.phpdata.markers.length > 0) {
        var data = window.phpdata.markers;

  for(var i = 0; i < data.length; i++) {
      var informations = data[i].info;



        var marker = new ol.Feature({
                geometry: new ol.geom.Point(
                ol.proj.fromLonLat([Number(data[i].lng), Number(data[i].lat)])
                ),
                });

                marker.setStyle(new ol.style.Style({
                image: new ol.style.Icon(({
                src: 'dot.png'
                }))
                }));

                vectors.addFeature(marker);

                marker.on('singleclick', function (event) {            //general function to move..
                     if (map.hasFeatureAtPixel(event.pixel) === true) {
                        document.getElementById("www").innerHTML=informations;
                     } else {
                         overlay.setPosition(undefined);
                         closer.blur();
                     }
                 });                                            // //to there

        }

        var layer = new ol.layer.Vector({
        source: vectors,
        });

        map.addLayer(layer);
}


document.getElementById('myposition').innerText = "click to map and get coordinates here";
map.on('singleclick', event => {
  const coordinate = ol.proj.toLonLat(event.coordinate);
  //const innerText = `Lon: ${coordinate[0].toFixed(4)}, Lat: ${coordinate[1].toFixed(4)}`;
  const innerText = `${coordinate[0].toFixed(4)}, ${coordinate[1].toFixed(4)}`;
  document.getElementById('myposition').innerText = innerText;
});


map.on('pointermove', function(evt) {
    map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
});


console.table(window.phpdata.markers)

Answer 1

功能没有点击事件。您需要检查是否有单击地图的功能。您可以将信息作为属性添加到功能中并使用 get() 来显示它。

for(var i = 0; i < data.length; i++) {
    var marker = new ol.Feature({
        geometry: new ol.geom.Point(
            ol.proj.fromLonLat([Number(data[i].lng), Number(data[i].lat)])
        ),
        info: data[i].info
    });
}

....
....

map.on('click', function(evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel,
        function(feature) {
            return feature;
        });
    if (feature) {
        document.getElementById("www").innerHTML = feature.get('info');
        ....
    };
});

如何将对象中的文本分配给具有相同索引的标记并在单击相关标记后显示相关文本？（Openlayers贴图）

How to assign text from object to marker with same index and show relevant text after click to relevant marker? (Openlayers map)

javascript

indexing

events

openlayers

javascript-objects

如何将对象中的文本分配给具有相同索引的标记并在单击相关标记后显示相关文本？ （Openlayers贴图）

How to assign text from object to marker with same index and show relevant text after click to relevant marker? (Openlayers map)

javascript

indexing

events

openlayers

javascript-objects

如何将对象中的文本分配给具有相同索引的标记并在单击相关标记后显示相关文本？（Openlayers贴图）