单击时是否可以从地图框弹出窗口中获取信息? [英] Is there a way to get information out of a mapbox popup when clicked on?
问题描述
我目前有一个mapbox应用程序，单击该按钮后会为每个标记显示一个弹出窗口，这很棒.但是，我想要的是将弹出窗口中的信息发送到应用程序内的单独div，因此数据显示在屏幕底部，而不是地图上的弹出窗口中.因此，它看起来类似于下图，但位于页面底部，并且仅包含必填数据，例如名称，说明等. 下面的代码是我用来生成标记的代码.
I currently have a mapbox app that displays a popup for each marker once clicked which is great. What I want however, is the information within the popup to be sent to a seperate div within the app, so the data is displayed at the bottom of the screen instead of within a popup on the map. So it looks something like the image below, but at the bottom of the page instead and with only the essential data such as name, description etc. The code below is what I am using to generate the markers.
到目前为止，我已经尝试编辑mapbox弹出窗口的CSS，但这只会被默认的mapbox CSS覆盖，即使不是，它也太笨拙了，无法达到我想要的效果. 我也知道可以使用Leaflet完成此操作，但这不是我想使用的东西，因此这对我来说不是一个选择.
So far I have tried editing the CSS of the mapbox popup, but this only gets overwritten by the default mapbox CSS and even when it's not, it's simply too clunky and does not give the effect I want. I'm also aware that this can be done using Leaflet, but this is not something that I wish to use, so that is not an option for me.
for(var i = 0; i < currentArray.length ; i++){
var el = document.createElement('div');
var markerHeight = 50, markerRadius = 10, linearOffset = 25;
el.className = 'marker2';
new mapboxgl.Marker(el)
.setLngLat([currentArray[i].lng, currentArray[i].lat])
.addTo(map);
new mapboxgl.Marker(el)
.setLngLat([currentArray[i].lng, currentArray[i].lat])
.setPopup(new mapboxgl.Popup({ offset: 25, closeOnClick:true})
.setHTML(
`<div id = "popup-container">
<h3>${currentArray[i].name}</h3>
<p>${currentArray[i].venue}</p>
</div>`
)
)
.addTo(map);
}
callbackEventbrite(function(result){
console.log("env", result)
//var geo = GeoJSON.parse(result.events,{Point: [result.location.latitude, result.location.longitude]});
//console.log(geo);
const keys = Object.values(result);
for(const key of keys){
geojson = {
type: 'featureCollection',
features: [{
type: 'feature',
geometry: {
type: 'Point',
coordinates: [key.venue.longitude, key.venue.latitude]
}
}]
}
eventInfo.push(
{"longitude": key.venue.longitude , "latitude": key.venue.latitude , "name": key.name.text, "venue": key.venue.name, "date": key.start.local, "category": key.category_id}
);
}
});
推荐答案
如果已将properties添加到图层数据中，则可以通过编程方式使用它们.假设您需要获取现有的API数据并格式化geojson，则可以尝试执行以下操作...
If you've added properties to your layer data, you can use them programmatically. Assuming you need to fetch your existing API data and format your geojson, you could try something like this...
// prepare geojson
let json = {
type: "FeatureCollection",
features: []
};
// apiData = some other json source
apiData.forEach(poi => {
// add poi to geojson
json.features.push({
type: "Feature",
properties: { // example properties
id: poi.id,
title: poi.title,
image: poi.image
},
geometry: { type: "Point", coordinates: [poi.longitude, poi.latitude] }
});
});
// add geojson source
map.addSource("my-locations", {
type: "geojson",
data: json,
});
// add stories layer
map.addLayer({
interactive: true,
id: "my-layer",
type: "circle",
source: "my-locations",
paint: {
"circle-color": #6495ED,
"circle-radius": 10,
}
});
在点击事件中使用格式化的数据...
map.on("click", "my-layer", e => {
// do something when user clicks on marker
var coordinates = e.features[0].geometry.coordinates.slice();
var id = e.features[0].properties.id;
var html = e.features[0].properties.image + e.features[0].properties.title;
var popupContent = window.document.createElement("div");
popupContent.addEventListener("click", e => {
// do something when user clicks on popup
});
popupContent.innerHTML = html;
new MapboxGL.Popup()
.setLngLat(coordinates)
.setDOMContent(popupContent)
.addTo(map);
});
您可能需要从使用new maboxgl.Marker.addTo切换到.在此处查看详细信息:
You may need to switch from using new maboxgl.Marker.addTo. See details here: https://docs.mapbox.com/help/troubleshooting/transition-from-mapbox-js-to-mapbox-gl-js/#add-a-marker
这篇关于单击时是否可以从地图框弹出窗口中获取信息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
