Question

我有一个应用程序，可以根据客户在CMS中输入的经度和纬度指向客户的特定位置。它在Chrome和Firefox中运行正常，但是在IE 11中显示为空白，我不知道为什么。我的home.js文件具有以下内容，其中顶部引用了tiny-slider（也在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);

我还确保了application.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并提示：找不到源映射https://clientname.net/packs/home-differentnumberletters.js.map

中指定的webpack：/// webpack / bootstrap数字字母

Answer 1

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

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

Rails，Google Map不在Internet Explorer中显示

1 个答案: