[英]How to assign text from object to marker with same index and show relevant text after click to relevant marker? (Openlayers map)
I use OpenLayers map and I would like to get some text from var informations after click to marker.我使用 OpenLayers map,我想在点击标记后从var 信息中获取一些文本。 I think thant I need to have "general" function about singleclick in cycle for, because I need do it for each index [i].
我想我需要有关于循环中单击的“一般”function,因为我需要为每个索引 [i] 做它。 But If I click to some marker I don´t see any information.
但是如果我点击某个标记,我看不到任何信息。
I tried to move "general" function to down before console.table(window.phpdata.markers) .我试图在console.table(window.phpdata.markers)之前将“general”function 向下移动。 When I run it, I can see last text from "informations" after click on each marker --> there isn´t any problem with getting data from databases.
当我运行它时,单击每个标记后我可以看到“信息”中的最后一个文本 --> 从数据库获取数据没有任何问题。
(This isn´t required result because I don´t want to see last marker. I would like to see relevant text from informations for relevant marker. So with same index [i]. (这不是必需的结果,因为我不想看到最后一个标记。我想从相关标记的信息中查看相关文本。因此具有相同的索引 [i]。
What to do for this result?这个结果怎么办? Thank´s
谢谢
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)
Features do not have click events.功能没有点击事件。 You need to check if there are features where you click the map. You can add the info as a property to the feature and use get() to display it.
您需要检查是否有单击 map 的功能。您可以将信息作为属性添加到功能中,并使用 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');
....
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.