1

我是 ReactJS 的新手，并且正在开发一个在不同点显示标记的项目，数据是从 JSON 文件接收的。目前，我正在使用弹出窗口来显示单击标记时的信息，如图所示：

//Map.js
geoJson.features.forEach((location, i) => {
      const el = document.createElement("div");
      el.className = "marker";
      var marker = new mapboxgl.Marker(el)
        .setLngLat(location.geometry.coordinates)
        .setPopup(
          new mapboxgl.Popup({ offset: 0, className: "popup" }).setHTML(`
            <div>
              <h1>${location.properties.title}</h1>
              <p>${location.properties.description}</p>
              <a class="popupbutton" target="_blank" href=${location.properties.link}>
                <button class="popupbutton">Website Link</button>
              </a>
            </div>
          `)
        )
        .addTo(map);
      marker.getElement().addEventListener("click", () => {
        zoomIn(i);
      });
    });

如上所示，弹出窗口当前显示每个标记的标题和描述，由 JSON 文件中的数据提供。但是，我想使用更现代、更通用的东西来显示这些信息，例如 Grommet Card ( https://v2.grommet.io/card )，因为当前的 Mapbox 弹出窗口不是很吸引人。我该怎么做呢？

4

0 回答 0