Question

我目前有一个mapbox应用，单击该按钮后会为每个标记显示一个弹出窗口，这很棒。但是，我想要的是将弹出窗口中的信息发送到应用程序内的单独div，因此数据显示在屏幕底部，而不是地图上的弹出窗口中。因此，它看起来类似于下图，但位于页面底部，并且仅包含基本数据，例如名称，描述等。下面的代码是我用来生成标记的代码。

google maps

到目前为止，我已经尝试编辑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}
    );

}
});

Answer 1

我对示例https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/进行了一些修改，以便单击该层时，描述不会显示在弹出窗口中，而是显示在页面底部的div中。

检查https://jsfiddle.net/anatolysukhanov/y2jLedtq/

想法是有2个divs

<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;
    }

Answer 2

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

单击时，是否可以从地图框弹出窗口中获取信息？

2 个答案:

使用属性等将API数据格式化为geojson

在点击事件中使用格式化的数据...