Javascript Vue组件未显示在IE11上

我有一个vue组件和geoIP来显示基于某人当前位置的地图。这在除IE11之外的所有浏览器上都能正常工作，IE11只显示一个空白，组件未启动

这是密码

<template>
  <div class="container">

    <div class="row reverse store-locator__wrapper">

      <div class="col-xs-12 col-sm-12 col-md-7 col-lg-8">
        <div>
          <div v-bind:style="{ display: storeView }" v-if="activeStore.store">
            <img v-if="activeStore.store.store_image" v-bind:src="activeStore.store.store_image">
          </div>

          <div v-bind:style="{ display: videoView }" v-if="activeStore.store">
            <div class="iframe-wrapper" v-if="activeStore.store.store_video" v-html="activeStore.store.store_video"></div>
          </div>

          <div class="map-container">
            <div id="map"></div>
          </div>

          <ul v-if="activeStore.store" class="store__view-changer">
            <li v-if="activeStore.store.store_image">
              <a href="" v-on:click="changeView('store', $event)" v-bind:class="storeActive">Store view</a>
            </li>
            <li v-if="activeStore.store.store_video">
              <a href="" v-on:click="changeView('video', $event)" v-bind:class="videoActive">Store video</a>
            </li>
            <li>
              <a href="" v-on:click="changeView('map', $event)" v-bind:class="mapActive">Map view</a>
            </li>
          </ul>
        </div>

        <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-12 col-lg-6 store-title">
          <h2 class="h4" v-if="activeStore.store">{{ activeStore.store.shop_name }}</h2>
          <p v-if="activeStore.store">{{ activeStore.store.shop }}</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-12 col-lg-6">
          <div v-if="activeStore.store && activeStore.store.hours" class="store-hours">
            <span v-for="(hour, index) in activeStore.store.hours.split('\n')" :key="index">{{ hour }}<br/></span>
          </div>

          <div v-if="activeStore.store">
            <div class="store-location">
            <p>{{ activeStore.store.address1 }}</p>
            <p>
              {{ activeStore.store.shop_name }},
              <span v-if="activeStore.store.state !== ''">
                {{ activeStore.store.state }} {{ activeStore.store.zip }}
              </span>

              <span v-else>
                {{ activeStore.store.zip }} {{ activeStore.store.country }}
              </span>
            </p>
          </div>
          <div class="store-contact">
            <p v-if="activeStore.store.phone">Call us {{ activeStore.store.phone }}</p>
            <p v-if="activeStore.store.email"><a v-bind:href="'mailto:' + activeStore.store.email">{{ activeStore.store.email }}</a></p>
            <p v-if="activeStore.store.website"><a v-bind:href="activeStore.store.website">{{ activeStore.store.website }}</a></p>
          </div>
            <p class="store-directions"><a v-bind:href="'https://www.google.com/maps/search/?api=1&query=' + activeStore.store.lat + ',' + activeStore.store.lng" target="_blank" class="btn btn--text">Get Directions</a></p>
          </div>
        </div>
      </div>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4">
        <div class="store-locator__header">
          <p class="h2"><span class="flash-title">{{ pageTitle }}</span></p>
        </div>
        <div class="form">
          <select data-country-selector v-on:change="updateLocation()" v-model="selectedCountry">
            <option v-bind:value="userCountry" v-if="userCountry === selectedCountry">You are in {{ userCountry }}</option>
            <option v-bind:value="userCountry" v-else>{{ userCountry }}</option>
            <option v-for="(country, index) in countries" v-if="userCountry !== country" v-bind:value="country" :key="index">{{ country }}</option>
          </select>

          <div id="pac-container" class="store__input-container">
            <input id="pac-input" type="text"
              placeholder="Enter a postcode">
              <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" class="icon-crosshairs"><path d="M8.5,4A4.5,4.5,0,1,0,13,8.5,4.49,4.49,0,0,0,8.5,4Zm0,8A3.5,3.5,0,1,1,12,8.5,3.5,3.5,0,0,1,8.5,12Z"/><rect x="8" width="1" height="3"/><rect x="8" y="14" width="1" height="3"/><rect x="14" y="8" width="3" height="1"/><rect y="8" width="3" height="1"/></svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="14.49" height="14.49" viewBox="0 0 14.49 14.49" class="icon-search"><path d="M12.5,12.5l3.77,3.78a.49.49,0,1,1-.7.7l-3.78-3.77a5.91,5.91,0,0,1-3.87,1.42,6,6,0,1,1,6-6A5.91,5.91,0,0,1,12.5,12.5Zm.42-3.87a5,5,0,1,0-5,5A5,5,0,0,0,12.92,8.63Z" transform="translate(-1.92 -2.63)"/></svg>
          </div>
        </div>

        <ul class="accordion-list accordion-list--stores" data-component="AccordionList">
        <li v-if="states.length > 0" v-for="(state, index) in states" v-bind:class="'accordion accordion-' + index" :key="index">
          <div class="accordion__label" role="heading">
            <button type="button" v-bind:data-toggle="'accordion-body-' + index" v-bind:aria-controls="'accordion-body-' + index" v-on:click="toggleAccordion(index)">{{ state }}

              <span class="accordion__icon accordion__icon--open">
                <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="13" height="7.21" viewBox="0 0 13 7.21"><g id="Components_Dropdown_Simple_Active" data-name="Components/Dropdown/Simple/Active"><g id="Icons_Icon-chevron-big-down" data-name="Icons/Icon-chevron-big-down"><path id="Shape" d="M3.5,6.9a.51.51,0,0,1,.15-.36.5.5,0,0,1,.7,0L10,12.19l5.65-5.65a.5.5,0,0,1,.7,0,.5.5,0,0,1,0,.71L10,13.6,3.65,7.25A.5.5,0,0,1,3.5,6.9Z" transform="translate(-3.5 -6.4)"/></g></g></svg></span>

              <span class="accordion__icon accordion__icon--close"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="7.21" viewBox="0 0 13 7.21"><g id="Components_Dropdown_Simple_Active" data-name="Components/Dropdown/Simple/Active"><g id="Icons_Icon-chevron-big-down" data-name="Icons/Icon-chevron-big-down"><path id="Shape" fill="#dedede" d="M3.5,6.9a.51.51,0,0,1,.15-.36.5.5,0,0,1,.7,0L10,12.19l5.65-5.65a.5.5,0,0,1,.7,0,.5.5,0,0,1,0,.71L10,13.6,3.65,7.25A.5.5,0,0,1,3.5,6.9Z" transform="translate(-3.5 -6.4)"/></g></g></svg></span>

            </button>
          </div>
          <div v-bind:id="'accordion-body-' + index" class="accordion__content">
            <div v-for="(store, index) in sortedStores" v-if="store.store.state === state" :key="index">
              <span v-on:click="setActiveStore(store)" v-bind:class="{'is-active': store.store.shop_name === activeStore.store.shop_name}">{{ store.store.shop_name }}</span>
            </div>
          </div>
        </li>

        <li v-show="states.length === 0" class="accordion">
          <div v-for="(store, index) in sortedStores" v-if="store.store.country !== 'Australia'" :key="index"><span v-on:click="setActiveStore(store)" v-bind:class="{'is-active': store.store.shop_name === activeStore.store.shop_name}">{{ store.store.shop_name }}</span></div>
        </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {

    props: ['maptheme', 'pageTitle', 'pageContent', 'storeLocation'],

    data: function() {
      return {
        stores: [],
        location: {},
        countries: [],
        userCountry: '',
        selectedCountry: '',
        selectedLocation: {},
        sortedStores: [],
        states: [],
        activeStore: {},
        map: {},
        storeView: 'none',
        videoView: 'none',
        mapActive: 'is-active',
        storeActive: '',
        videoActive: '',
        pinBlack: window.markers.black,
        pinGold: window.markers.gold,
      };
    },

    mounted: function() {
      if (window.geoip2 === undefined) {
        const tmpLat = -37.9716929;
        const tmpLng = 144.7729655;
        this.setupMap(tmpLat, tmpLng);
        this.getStores();
        this.initMap();
      } else {
        /* eslint-disable */
        geoip2.city(this.onSuccess, this.onError);
        this.initMap();
        /* eslint-enable */
      }
    },

    watch: {
      selectedCountry: {
        handler: function() {
          this.sortStores(this.selectedCountry);
          this.setInputPlaceholder(this.selectedCountry);
        },
      },

      activeStore: {
        handler: function() {
          this.setMapPosition();
        },
        deep: true,
      },

    },

    methods: {
      setupMap: function(lat, lng) {
        if (this.maptheme === 'hb_theme') {
          /* eslint-disable */
          this.map = new google.maps.Map(document.getElementById('map'), {
            center: {
              lat,
              lng,
            },
            zoom: 4,
            styles: [
              {
                "elementType": "geometry",
                "stylers": [
                  {
                    "color": "#212121"
                  }
                ]
              },
              {
                "elementType": "geometry.stroke",
                "stylers": [
                  {
                    "color": "#daa676"
                  }
                ]
              },
              {
                "elementType": "labels.icon",
                "stylers": [
                  {
                    "visibility": "off"
                  }
                ]
              },
              {
                "elementType": "labels.text",
                "stylers": [
                  {
                    "color": "#daa676"
                  }
                ]
              },
              {
                "elementType": "labels.text.fill",
                "stylers": [
                  {
                    "color": "#757575"
                  }
                ]
              },
              {
                "elementType": "labels.text.stroke",
                "stylers": [
                  {
                    "color": "#212121"
                  }
                ]
              },
              {
                "featureType": "administrative",
                "elementType": "geometry",
                "stylers": [
                  {
                    "color": "#757575"
                  }
                ]
              },
              {
                "featureType": "administrative.country",
                "elementType": "labels.text.fill",
                "stylers": [
                  {
                    "color": "#9e9e9e"
                  }
                ]
              },
              {
                "featureType": "administrative.land_parcel",
                "stylers": [
                  {
                    "visibility": "off"
                  }
                ]
              },
              {
                "featureType": "administrative.locality",
                "elementType": "labels.text.fill",
                "stylers": [
                  {
                    "color": "#bdbdbd"
                  }
                ]
              },
              {
                "featureType": "poi",
                "elementType": "labels.text.fill",
                "stylers": [
                  {
                    "color": "#757575"
                  }
                ]
              },
              {
                "featureType": "poi.park",
                "elementType": "geometry",
                "stylers": [
                  {
                    "color": "#181818"
                  }
                ]
              },
              {
                "featureType": "poi.park",
                "elementType": "labels.text.fill",
                "stylers": [
                  {
                    "color": "#616161"
                  }
                ]
              },
              {
                "featureType": "poi.park",
                "elementType": "labels.text.stroke",
                "stylers": [
                  {
                    "color": "#1b1b1b"
                  }
                ]
              },
              {
                "featureType": "road",
                "elementType": "geometry.fill",
                "stylers": [
                  {
                    "color": "#2c2c2c"
                  }
                ]
              },
              {
                "featureType": "road",
                "elementType": "labels.text.fill",
                "stylers": [
                  {
                    "color": "#8a8a8a"
                  }
                ]
              },
              {
                "featureType": "road.arterial",
                "elementType": "geometry",
                "stylers": [
                  {
                    "color": "#373737"
                  }
                ]
              },
              {
                "featureType": "road.highway",
                "elementType": "geometry",
                "stylers": [
                  {
                    "color": "#3c3c3c"
                  }
                ]
              },
              {
                "featureType": "road.highway.controlled_access",
                "elementType": "geometry",
                "stylers": [
                  {
                    "color": "#4e4e4e"
                  }
                ]
              },
              {
                "featureType": "road.local",
                "elementType": "labels.text.fill",
                "stylers": [
                  {
                    "color": "#616161"
                  }
                ]
              },
              {
                "featureType": "transit",
                "elementType": "labels.text.fill",
                "stylers": [
                  {
                    "color": "#757575"
                  }
                ]
              },
              {
                "featureType": "water",
                "elementType": "geometry",
                "stylers": [
                  {
                    "color": "#000000"
                  }
                ]
              },
              {
                "featureType": "water",
                "elementType": "labels.text.fill",
                "stylers": [
                  {
                    "color": "#3d3d3d"
                  }
                ]
              }
            ],
          });
        } else {
          this.map = new google.maps.Map(document.getElementById('map'), {
            center: {
              lat,
              lng,
            },
            zoom: 4,
          });
        }
      },
      onSuccess: function(location) {
        this.location = location;
        this.selectedLocation = {
          lat: this.location.location.latitude,
          lng: this.location.location.longitude,
        };
        this.setupMap(this.location.location.latitude, this.location.location.longitude);
        this.getStores();
        /* eslint-enable */
      },

      onError: function(error) {
        this.setupMap(0, 0);
        this.getStores();
        console.log('GEOIP ERROR: ', error);
      },

      getStores: async function() {
        try {
          const storeData = await axios.get('');
          this.stores = storeData.data.stores;
          const tmpCountries = [];
          this.stores.forEach(store => {
            tmpCountries.push(store.country);
          });
          this.countries = [...new Set(tmpCountries)];
          if (this.location.country) {
            if (this.location.country.names.en == "United States") {
              this.userCountry = "USA";
            } else {
              this.userCountry = this.location.country.names.en;
            }
          } else {
            this.userCountry = this.storeLocation === "US" ? "USA" : this.storeLocation === "AU" ? "Australia" : "United Kingdom"
          }
          this.selectedCountry = this.userCountry;
        } catch (error) {
          console.log('ERROR Getting stores: ', error);
        }
      },

      updateLocation: function() {
        const input = document.getElementById('pac-input');

        if (input) {
          input.value = '';
        }

        this.selectedLocation = {
          lat: this.location.location.latitude,
          lng: this.location.location.longitude,
        };

      },

      sortStores: function(activeCountry) {
        const storesWithDistance = [];
        const selectedLocation = new google.maps.LatLng(this.selectedLocation.lat, this.selectedLocation.lng);
        const activeCountries = this.stores.filter(store => store.country === activeCountry);
        const otherCountries = this.stores.filter(store => store.country !== activeCountry);
        if (activeCountries.length > 0) {
          activeCountries.forEach(store => {
            const storeLocation = new google.maps.LatLng(store.lat, store.lng);
            const distance = google.maps.geometry.spherical.computeDistanceBetween(selectedLocation, storeLocation);
            storesWithDistance.push({
              store: store,
              distance: distance,
            });
          });

          this.sortedStores = storesWithDistance.sort((storeA, storeB) => storeA.distance - storeB.distance);
          if (this.selectedCountry === 'Australia') {
            const tmpStates = [];
            this.sortedStores.forEach(store => {
              tmpStates.push(store.store.state);
            });
            this.states = [...new Set(tmpStates)];
          } else {
            this.states = [];
          }
        } else if (otherCountries.length > 0) {
          otherCountries.forEach(store => {
            const storeLocation = new google.maps.LatLng(store.lat, store.lng);
            const distance = google.maps.geometry.spherical.computeDistanceBetween(selectedLocation, storeLocation);
            storesWithDistance.push({
              store: store,
              distance: distance,
            });
          });

          this.sortedStores = storesWithDistance.sort((storeA, storeB) => storeA.distance - storeB.distance);
          if (this.selectedCountry === 'Australia') {
            const tmpStates = [];
            this.sortedStores.forEach(store => {
              tmpStates.push(store.store.state);
            });
            this.states = [...new Set(tmpStates)];
          } else {
            this.states = [];
          }
        }

        this.activeStore = this.sortedStores[0];
        setTimeout(() => {
          this.toggleAccordion(0);
        }, 50);
      },

      setActiveStore: function(store) {
        this.activeStore = store;
      },

      setMapPosition: function() {
        if (!this.activeStore.store.store_image && !this.activeStore.store.store_video) {
          this.changeView('map');
        } else if (!this.activeStore.store.store_video) {
          this.changeView('store');
        } else {
          this.changeView('video');
        }
        const newPosition = new google.maps.LatLng(this.activeStore.store.lat, this.activeStore.store.lng);
        this.map.setCenter(newPosition);
        this.map.setZoom(12);
        new google.maps.Marker({
          position: newPosition,
          map: this.map,
          icon: this.pinGold,
        });
      },

      initMap: function() {
        const self = this;
        const input = document.getElementById('pac-input');
        const options = {
          types: ['(regions)'],
          componentRestrictions: {
            country: ['gb', 'us', 'au'],
          },
        };
        const autocomplete = new google.maps.places.Autocomplete(input, options);

        autocomplete.addListener('place_changed', function() {
          var place = autocomplete.getPlace();
          self.selectedLocation = {
            lat: place.geometry.location.lat(),
            lng: place.geometry.location.lng(),
          };
          self.selectedCountry = '';
          setTimeout(() => {
            place.address_components.forEach(component => {
              if (component.types[0] === 'country') {
                self.selectedCountry = component.long_name;
                self.setInputPlaceholder(component.long_name);
              }
            });
          }, 20);
        });
      },

      toggleAccordion: function(index) {
        const allAccordions = document.querySelectorAll('.accordion');
        const accordion = document.querySelector('.accordion-' + index);
        let isOpen = false;

        if (accordion) {
          if (accordion.classList.contains('is-expanded')) {
            isOpen = true;
          }
        }

        if (allAccordions) {
          allAccordions.forEach(singleAccordion => {
            singleAccordion.classList.remove('is-expanded');
          });
        }

        if (accordion && !isOpen) {
          accordion.classList.add('is-expanded');
        }
      },

      changeView: function(view, event) {
        if (event) {
          event.preventDefault();
        }
        const mapEl = document.querySelector('.map-container');
        if (view === 'map') {
          this.storeView = 'none';
          this.videoView = 'none';
          setTimeout(() => {
            if (mapEl) {
              mapEl.style.display = 'block';
            }
          }, 10);
          this.mapActive = 'is-active';
          this.storeActive = '';
          this.videoActive = '';
        } else if (view === 'store') {
          if (mapEl) {
            mapEl.style.display = 'none';
          }
          this.videoView = 'none';
          setTimeout(() => {
            this.storeView = 'block';
          }, 10);
          this.mapActive = '';
          this.videoActive = '';
          this.storeActive = 'is-active';
        } else {
          if (mapEl) {
            mapEl.style.display = 'none';
          }
          this.storeView = 'none';
          setTimeout(() => {
            this.videoView = 'block';
          }, 10);
          this.mapActive = '';
          this.storeActive = '';
          this.videoActive = 'is-active';
        }
      },

      setInputPlaceholder: function(country) {
        const input = document.getElementById('pac-input');

        if (country === 'Australia') {
          input.setAttribute('placeholder', 'Enter a postcode');
        } else {
          input.setAttribute('placeholder', 'Enter a Zip code');
        }
      },
    },

  };
</script>

{{activeStore.store.shop_name}
{{{activeStore.store.shop}
{{hour}}

{{activeStore.store.address1}


{{activeStore.store.shop_name}，
{{activeStore.store.state}{{activeStore.store.zip}
{{activeStore.store.zip}{{{activeStore.store.country}

给我们打电话{{{activeStore.store.phone}



{{pageTitle}
您在{{userCountry}
{{userCountry}
{{国家}


{{state}}
{{store.store.shop_name}


{{store.store.shop_name}


从“axios”导入axios；
导出默认值{
道具：['maptheme'，'pageTitle'，'pageContent'，'storeLocation']，
数据：函数（）{
返回{
门店：[]，
地点：{}，
国家：[]，
用户国家：''，
所选国家/地区：“”，
selectedLocation:{}，
分类存储：[]，
国家：[]，
activeStore:{}，
映射：{}，
storeView:“无”，
videoView:“无”，
mapActive:'是活动的'，
storeActive:“”，
视频活动：“”，
pinBlack:window.markers.black，
pinGold:window.markers.gold，
};
},
挂载：函数（）{
如果（window.geoip2==未定义）{
常数tmpLat=-37.9716929；
常数tmpLng=144.7729655；
此设置图（tmpLat、tmpLng）；
这个.getStores（）；
this.initMap（）；
}否则{
/*eslint禁用*/
geoip2.城市（this.onSuccess，this.onError）；
this.initMap（）；
/*eslint使能*/
}
},
观察：{
选定国家/地区：{
处理程序：函数（）{
this.sortStores（this.selectedCountry）；
this.setInputPlaceholder（this.selectedCountry）；
},
},
activeStore：{
处理程序：函数（）{
这是setMapPosition（）；
},
深：是的，
},
},
方法：{
设置图：功能（lat、lng）{
if（this.maptheme==='hb_theme'）{
/*eslint禁用*/
this.map=new google.maps.map（document.getElementById（'map'）{
中心：{
拉特，
液化天然气，
},
缩放：4，
风格：[
{
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“212121”
}
]
},
{
“elementType”：“geometry.stroke”，
“造型师”：[
{
“颜色”：“daa676”
}
]
},
{
“elementType”：“labels.icon”，
“造型师”：[
{
“可见性”：“关闭”
}
]
},
{
“elementType”：“labels.text”，
“造型师”：[
{
“颜色”：“daa676”
}
]
},
{
“elementType”：“labels.text.fill”，
“造型师”：[
{
“颜色”：“#7575”
}
]
},
{
“elementType”：“labels.text.stroke”，
“造型师”：[
{
“颜色”：“212121”
}
]
},
{
“功能类型”：“管理”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“#7575”
}
]
},
{
“featureType”：“administration.country”，
“elementType”：“labels.text.fill”，
“造型师”：[
{
“颜色”：“#9e9e9e”
}
]
},
{
“功能类型”：“行政用地”，
“造型师”：[
{