使用 Mapbox GL 需要 API 访问令牌

如何解决使用 Mapbox GL 需要 API 访问令牌

我正在尝试通过 mapbox gl 在我的 Rails 应用程序上实现地图。我遵循了所有步骤，但未显示地图，并且在控制台上出现此错误：使用 Mapbox GL 需要 API 访问令牌。我实际上在我的 .env 文件上设置了密钥。这些是实现地图的所有过程：

- geocoder.rb

Geocoder.configure(
  # [...]
  units: :km,# defaults to miles (:mi)
  # [...]
)

- shop.rb

  

      class Shop < ApplicationRecord
      belongs_to :user
      has_many :reviews,dependent: :destroy
      has_many :products,dependent: :destroy
      geocoded_by :address
      after_validation :geocode,if: :will_save_change_to_address?
    
      def confirmed_orders
        self.products.joins(:cart).where(carts: {status: "confirmed"})
      end
    
      def past_confirmed_orders
        self.confirmed_orders.joins(:cart).where("carts.pick_up_date < ?",Date.today)
      end
    
      def upcoming_confirmed_orders
        self.confirmed_orders.joins(:cart).where("carts.pick_up_date >= ?",Date.today)
      end
    end

- Shopcontroller

    def index
    @shops = Shop.all
    @markers = @shops.geocoded.map do |shop|
      {
        lat: shop.latitude,lng: shop.longitude
      }
    end
  end


- _index.html.erb (MAPBOX_API_KEY is defined in my .env file)

    <div id="map"
     style="width: 100%; height: 600px;"
     data-markers="<%= @markers.to_json %>"
     data-mapbox-api-key="<%= ENV['MAPBOX_API_KEY'] %>">
</div>
   

- init_mapbox.js

    import mapboxgl from 'mapbox-gl';

const buildMap = (mapElement) => {
  mapboxgl.accessToken = mapElement.dataset.mapboxApiKey;
  return new mapboxgl.Map({
    container: 'map',style: 'mapbox://styles/mapbox/streets-v10'
  });
};

const addMarkersToMap = (map,markers) => {
  markers.forEach((marker) => {
    new mapboxgl.Marker()
      .setLngLat([ marker.lng,marker.lat ])
      .addTo(map);
  });
};

const fitMapToMarkers = (map,markers) => {
  const bounds = new mapboxgl.LngLatBounds();
  markers.forEach(marker => bounds.extend([ marker.lng,marker.lat ]));
  map.fitBounds(bounds,{ padding: 70,maxZoom: 15 });
};

const initMapbox = () => {
  const mapElement = document.getElementById('map');
  if (mapElement) {
    const map = buildMap(mapElement);
    const markers = JSON.parse(mapElement.dataset.markers);
    addMarkersToMap(map,markers);
    fitMapToMarkers(map,markers);
  }
};

export { initMapbox };


- application.js

    import { initMapbox } from '../plugins/init_mapbox';


document.addEventListener('turbolinks:load',() => {

  initMapbox();
});


Thank you in advance for your time.