时间戳

首页 > 解决方案 > 如何生成几个不同的 MapBox 地图

javascript - 如何生成几个不同的 MapBox 地图

问题描述

我正在尝试建立一个网站，用户在其中输入城市和场地，并且一堆场地在每个场地容器中加载地图。发生的情况是只有标记出现，只有列表上的最后一个地点显示实际地图，其他地图容器是空白的。

图片上会发生什么。

我试过的代码：

mapboxgl.accessToken = 'ACCESSTOKEN123';
let maps = {}, markers = {};

export function loadVenues(venues, container) {
  container.innerHTML = "";
  venues.forEach(venue => {
    const {
      name,
      id,
      lat,
      lng
    } = venue;

    // ADDING VENUE
    container.innerHTML += `
      <div class="col">
        <div class="venue" id="venue${id}">

          <h3 class="card-title">${name}</h3>

          <div class="map-content">
            <div id=${id} class='venue-map'></div>

            <button class="btn btn-secondary rounded-circle venue-point">
              <img src="./style/images/icons8_next_page_100px.png" alt="">
            </button>
          </div>

        </div>
      </div>
    `;

    // MAKING MAP
    maps = {
      ...maps,
      ["map" + id]: (new mapboxgl.Map({
        container: id,
        center: [lng, lat],
        style: 'mapbox://styles/mapbox/dark-v10',
        zoom: 15
        }))
    };

    // MAKING MARKER
    markers = {
      ...markers,
      ["marker" + id]: (new mapboxgl.Marker({
        color: "#5B43EF",
      })
      .setLngLat([lng, lat])
      .addTo(maps["map" + id]))
    };

  });
}

标签： javascriptmapboxmapbox-gl-js

解决方案

你有一个 JSFiddle 或 JSbin 来测试这个吗？如果是这样，你能把它和你的问题一起贴在这里吗？似乎您的 forEach 循环可能存在问题。

推荐阅读