有没有办法在点击时从mapbox弹出窗口中获取信息？
我目前有一个mapbox应用程序，一旦点击就会显示每个标记的弹出窗口，这很棒。然而，我想要的是弹出窗口中的信息被发送到应用程序中的单独div，因此数据显示在屏幕底部，而不是在地图上的弹出窗口中。所以它看起来像下面的图像，但是在页面的底部，只有基本的数据，如名称，描述等。下面的代码是我用来生成标记的。
到目前为止，我已经尝试过编辑mapbox弹出窗口的CSS，但这只会被默认的mapbox CSS覆盖，即使不是这样，它也太笨拙了，没有给出我想要的效果。我也知道这可以使用Leaflet来完成，但这不是我想要使用的东西，所以对我来说也不是一个选择。
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}
);
}
});回答 2
Stack Overflow用户
发布于 2019-04-24 11:12:09
我稍微修改了这个示例https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/，这样当单击层时，描述不会显示在弹出窗口中，而是显示在页面底部的div中。
请查看此https://jsfiddle.net/anatolysukhanov/y2jLedtq/
这个想法是有2个div
<div id="map"></div>
<div id="popup"></div>样式是这样的
#map {
position:absolute;
top:0;
bottom:0;
width:100%;
}
#popup {
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
opacity: 0.8;
background-color: white;
}Stack Overflow用户
发布于 2019-04-30 23:13:31
如果已将properties添加到图层数据，则可以通过编程方式使用它们。假设您需要获取现有的API数据并格式化您的geojson，您可以尝试如下所示……
将API数据格式化为具有属性的geojson等
// 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进行切换。详情请看这里：https://docs.mapbox.com/help/troubleshooting/transition-from-mapbox-js-to-mapbox-gl-js/#add-a-marker
https://stackoverflow.com/questions/55820133
复制相似问题
腾讯云开发者
