Rails，谷歌地图不会显示在Internet Explorer中

Question

我有一个应用程序，它根据客户在CMS中输入的纬度和经度指向客户的特定位置。它在Chrome和Firefox中运行良好，但是在IE 11中显示空白，我不知道为什么。我的 home.js 文件有以下内容，顶部引用了微小的滑块(在 IE 中也不起作用(：

import { tns } from 'tiny-slider/src/tiny-slider.module';
import { mapStyle } from './styles/mapStyle';
app.home = () => {
  function init() {
    setupSlider();
    startGoogleMap();
    let tabs = document.querySelectorAll('a.tab');
    for (let tab of tabs) {
      tab.addEventListener('click', tabClicked);
}
document.querySelector('#region-select_').addEventListener('change', selectClicked);
}
  let setupSlider = () => {
    const sliderOpts = {
      container: '.spud-banner-set',
      items: 1,
      slideBy: 'page',
      autoplay: true,
      controls: false,
      responsive: true,
      autoplayButtonOutput: false
    };
    const slider = tns(sliderOpts);
  };
  let startGoogleMap = () => {
    let map = new google.maps.Map(document.getElementById('map-banner'), {
      zoom: 3,
      minizoom: 3,
      // The latitude and longitude to center the map (always required)
      disableDefaultUI: true,
      gestureHandling: 'cooperative',
      styles: mapStyle
    });
    let mapElement = document.getElementById('map-banner');
    let pointMarkers = mapElement.getAttribute('data-location');
    let marked = JSON.parse(pointMarkers);
    let bounds = new google.maps.LatLngBounds();
    marked.forEach(marked => {
      if (marked.lat == null) return;
      if (marked.lng == null) return;
      const marker = new google.maps.Marker({
        position: new google.maps.LatLng(marked.lat, marked.lng),
        map: map,
        icon: '/marker.png',
        title: marked.name
      });
      bounds.extend(marker.position);
    });
    map.fitBounds(bounds);
  };
  let tabClicked = e => {
    e.preventDefault();
    const tabTarget = e.currentTarget.getAttribute('data-index');
    updateDisplayedTabs(tabTarget);
  };
  let selectClicked = e => {
    e.preventDefault();
    const tabTarget = e.target.value;
    updateDisplayedTabs(tabTarget);
  };
  let updateDisplayedTabs = tabTarget => {
    let tabs = document.querySelectorAll('a.tab');
    for (let tab of tabs) {
      const tabIndex = tab.getAttribute('data-index');
      if (tabIndex === tabTarget) {
        tab.classList = 'active tab';
      } else {
        tab.classList = 'tab';
      }
    }
    let tabContents = document.querySelectorAll('.region-tab');
    for (let content of tabContents) {
      const index = content.getAttribute('data-index');
      if (index === tabTarget) {
        content.setAttribute('data-active', 'true');
      } else {
        content.setAttribute('data-active', 'false');
      }
    }
  };
  return init();
};

我认为这可能是一个样式问题，但我实际上已经浏览了主页上的每个样式并将其剥离，但从未看到地图出现。

我的主页上有以下内容显示地图：

=content_for :head do
 = javascript_include_tag "//maps.googleapis.com/maps/api/js?key=#{ENV['MAP_KEY']}"
=content_for :body do
 .container-fluid
  .row
   #map-banner.banner[type="hidden" data-location=all_locations.to_json]
= render template: '/layouts/application'
javascript:
  document.addEventListener('DOMContentLoaded', app.home);

我还确保应用程序.html.slim文件也存在DOCTYPE HTML。头部还包括：

meta http-equiv='X-UA-Compatible" content="IE=edge'

SCSS 具有以下横幅：

#map-banner {
   height: 286px;
   width: 100%;
} 
.banner {
 position: absolute;
}

我在使用微小滑块时也遇到了问题，所以我不知道这些是否相关。

编辑： 我确实检查了控制台单击HTML1300：导航发生。文件：clientname.net，并提示：找不到 webpack:///webpack/bootstrap 数字在源映射 https://clientname.net/packs/home-differentnumberletters.js.map 中指定的字母

Answer 1

如果其他人遇到它，请将其留在这里。显然，这是Webpack和UglifyJS的问题。将以下内容添加到我的环境.js文件中：

environment.plugins.get("UglifyJs").options.uglifyOptions.ecma = 5