有没有办法在点击时从地图框弹出窗口中获取信息？

Posted 2021-04-15

我目前有一个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}
    );

}
});

答案

我稍微修改了这个示例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;
    }

另一答案

如果您已将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