带有 Rails 6 和 webpacker 的谷歌地图的 setcenter 问题答案

【问题标题】：setcenter issue with google maps with rails 6 and webpacker带有 Rails 6 和 webpacker 的谷歌地图的 setcenter 问题
【发布时间】：2020-11-16 21:40:00
【问题描述】：

我对 rails + webpacker 还是很陌生，我正在尝试在地图上显示一个标记。它适用于多个标记，但是当只有一个时，它会显示海洋的中间。当我刷新时，它运行良好。我使用的是 Rails 6。

这是插件：

import GMaps from 'gmaps/gmaps.js';

const initMap = () => {
  document.addEventListener("turbolinks:load", function() {
    const initMap = document.getElementById('map');

      if (initMap) { // don't try to build a map if there's no div#map to inject in
        const map = new GMaps({ el: '#map', lat: 0 , lng: 0 });
        const markers = JSON.parse(initMap.dataset.markers);
        map.addMarkers(markers);

      if (markers.length === 0) {
        map.setZoom(2);
      } else if (markers.length === 1) {
        map.setCenter(markers[0].lat, markers[0].lng);
        map.setZoom(12);
      } else {
        map.fitLatLngBounds(markers);
      }
    };
  });
}
export { initMap };

这里是application.js

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

// External imports
import { initMap } from '../plugins/init_map';
import { initAutocomplete } from '../plugins/init_autocomplete';
import "bootstrap";
import flatpickr from "flatpickr";
initMap();

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

  initAutocomplete();
  flatpickr("#booking_start_time", {
    enableTime: true,
    dateFormat: "Y-m-d H:i",
  });
  flatpickr("#booking_end_time", {
      enableTime: true,
      dateFormat: "Y-m-d H:i",
    });
});

谢谢！

【问题讨论】：

您是否尝试将initMap() 移动到turbolinks:load 回调中？

标签： javascript ruby-on-rails google-maps webpacker

【解决方案1】：

您的 HTML 文件中有 div id="map" 吗？
首先，您应该在加载 Javascript 之前检查 HTML 是否已呈现，我认为是这样，但我记得 Turbolinks 存在类似这样的缓存问题。

来自the documentation

在渲染过程中，Turbolinks 直接替换当前元素并合并元素的内容。 JavaScript 窗口和文档对象，以及 HTML 元素，从一个呈现到下一个呈现持续存在。

尝试删除您的 "turbolinks:load" 声明。

之后，您应该尝试在脚本的每一步都添加debugger，例如

  debugger;
  const markers = JSON.parse(initMap.dataset.markers);

并用 Chrome 调试它以检查数据是否已加载

【讨论】：