Javascript Mapbox地图不会在主页上重新加载

我有一个很奇怪的问题。我正在构建一个Rails应用程序。我从Mapbox添加了一张地图。当我最初加载应用程序时，地图工作正常，但是如果我转到另一个路径，然后通过应用程序内部的链接返回主页（例如，左上角的应用程序徽标重定向到主页），那么地图将根本不会加载。如果我通过浏览器上的“后退”按钮返回，则地图将仅加载标记，而不会加载实际地图。如果我刷新页面，我可以再次看到地图，但标记不会像应该的那样集中在中间。只有硬重置才能使地图再次正常工作

谷歌在这方面根本帮不了我。我希望这里有人能指导我

home.html.erb

<div class="hero-image">
  <div class="hero-text">
    <h1>All our Meals</h1>
    <div class="card-container-search">
      <div class="align-items-center">
        <%= form_tag root_path, method: :get do %>
        <%= text_field_tag :search, params[:search], placeholder: "What local meal are you looking to experience?", class:"form-control" %>
      </div>
      <div>
        <%= submit_tag "Search", class: "search-button"%>
        <% end %>
      </div>
    </div>
  </div>
</div>

<div class="d-flex flex-row justify-content-around ">
  <div class="card-container">
    <% @meals.each do |meal| %>
      <div class="card" id="meals">
        <%= cl_image_tag meal.photos.first.key, class: 'card-image' if meal.photos.size>0 %>
        <div class="card-text">
         <h4><%= link_to meal.name, meal_path(meal), class: "adress-link" %></h4>
          <p><%= meal.address %></p>
          <p><%= meal.min_eaters %></i>-<i><%= meal.max_eaters %> eaters</p>
          <p>$</i> <%= meal.price %></p>
        </div>
      </div>
    <% end %>
  </div>

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

init_mapbox.js

import mapboxgl from 'mapbox-gl';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'

const mapElement = document.getElementById('map');

const addMarkers = (map, markers) => {
  markers.forEach((marker) => {
  const popup = new mapboxgl.Popup().setHTML(marker.infoWindow);
  new mapboxgl.Marker()
    .setLngLat([ marker.lng, marker.lat ])
    .setPopup(popup)
    .addTo(map);
  });
};


const fitMapToMarkers = (map, markers) => {
  const bounds = new mapboxgl.LngLatBounds();
  markers.forEach(marker => bounds.extend([ marker.lng, marker.lat ]));
  map.fitBounds(bounds, { padding: 60, maxZoom: 11, duration: 0 });
};
const initMapbox = () => {
  if (mapElement) {
    mapboxgl.accessToken = mapElement.dataset.mapboxApiKey;
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/***'
});

const markers = JSON.parse(mapElement.dataset.markers);

  fitMapToMarkers(map, markers);
  addMarkers(map, markers)
  map.addControl(new MapboxGeocoder({ accessToken: mapboxgl.accessToken }))

  }
};

export { initMapbox };

init_autocomplete.js

import places from 'places.js';

const initAutocomplete = () => {
  const addressInput = document.getElementById('meal_address');
  if (addressInput) {
    places({ container: addressInput });
  }
};

export { initAutocomplete };

---

请随意画任何你认为我的代码有问题的东西

当地图未显示时，您是否在控制台中看到任何错误或对Mapbox端点的请求返回状态代码，而不是网络请求中的

200:OK

？在控制台上：

index.js:243在选项中未检测到mapboxgl。地图标记被禁用。请设置选项。mapboxgl

。但我每次都会明白，当地图起作用而不起作用时。在网络上，所有东西都是200，除了一些与访问令牌相关的东西，返回204，当地图按预期工作时，我会得到相同的状态码当地图不显示时，您是否在控制台中看到任何错误或对Mapbox端点的请求返回除网络请求中的

200:OK

以外的状态代码？在控制台上：

index.js:243在选项中未检测到mapboxgl。地图标记被禁用。请设置选项。mapboxgl

。但我每次都会明白，当地图起作用而不起作用时。在网络上，除了与访问令牌相关的内容（返回204）之外，所有内容都是200，当地图按预期工作时，我会得到相同的状态代码

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("custom/carousel")



// External import
import "bootstrap";
import 'mapbox-gl/dist/mapbox-gl.css';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
import { initAutocomplete } from '../plugins/init_autocomplete';

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

initMapbox();
initAutocomplete();

// Internal imports, e.g:
// import { initSelect2 } from '../components/init_select2';

document.addEventListener('turbolinks:load', () => {
  // Call your functions here, e.g:
  // initSelect2();
});

import mapboxgl from 'mapbox-gl';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'

const mapElement = document.getElementById('map');

const addMarkers = (map, markers) => {
  markers.forEach((marker) => {
  const popup = new mapboxgl.Popup().setHTML(marker.infoWindow);
  new mapboxgl.Marker()
    .setLngLat([ marker.lng, marker.lat ])
    .setPopup(popup)
    .addTo(map);
  });
};


const fitMapToMarkers = (map, markers) => {
  const bounds = new mapboxgl.LngLatBounds();
  markers.forEach(marker => bounds.extend([ marker.lng, marker.lat ]));
  map.fitBounds(bounds, { padding: 60, maxZoom: 11, duration: 0 });
};
const initMapbox = () => {
  if (mapElement) {
    mapboxgl.accessToken = mapElement.dataset.mapboxApiKey;
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/***'
});

const markers = JSON.parse(mapElement.dataset.markers);

  fitMapToMarkers(map, markers);
  addMarkers(map, markers)
  map.addControl(new MapboxGeocoder({ accessToken: mapboxgl.accessToken }))

  }
};

export { initMapbox };

import places from 'places.js';

const initAutocomplete = () => {
  const addressInput = document.getElementById('meal_address');
  if (addressInput) {
    places({ container: addressInput });
  }
};

export { initAutocomplete };