Невозможно получить ссылку на переменную области действия из метода - PullRequest
Новая
       20

Невозможно получить ссылку на переменную области действия из метода

0 голосов
/ 23 мая 2019

Я выполняю рефакторинг кода Vue для отображения карты Google.Вместо того, чтобы вызывать Google Maps из index.html, я звоню из подключенного.Все хорошо, пока я не попытаюсь ссылаться на переменную Google из метода.Я получаю сообщение об ошибке не найден.Я понимаю, что это проблема переменной области, но до сих пор мои попытки реорганизации не увенчались успехом.Как сделать Google доступным для метода? 

<template>
  <div>
    <div class="locations-map" :id="mapName"></div>
  </div>
</template>

<script>
import gmapsInit from '@/utils/gmaps';

export default {
  name: "locations-map",
  props: ['name', 'locations', 'viewStatus'],
  data: function() {
    return {
      mapName: this.name + "-map",
      filteredLocationType: "all",
      markers: [],
    };
  },
  computed: {
    filteredLocations: function() {
      if (this.filteredLocationType === "all") {
        return this.locations;
      } else if (this.filteredLocationType === "term") {
        return this.locations.filter(function(location) {
          return location.category === "Terminal";
        });
      } else if (this.filteredLocationType === "dl") {
        return this.locations.filter(function(location) {
          return location.category === "Drop Location";
        });
      } else {
        return null;
      }
    }
  },
  watch: {
    locations: function() {
      this.initMap();
      }
  },
  async mounted() {
      const google = await gmapsInit();
      const map = document.getElementById(this.mapName)
      const options = {
        zoom: 4,
        center: new google.maps.LatLng(37.09024, -95.712891), // center of USA
        scrollwheel: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      this.map = new google.maps.Map(map, options);
  },
  methods: {
    initMap: function() {
      this.addLocationMarkers();
    },
    clearMarkers: function() {
      for (var i = 0; i < this.markers.length; i++) {
        this.markers[i].setMap(null);
      }
      this.markers = []; // reset markers
    },
    addLocationMarkers: function() {
      this.filteredLocations.forEach(location => {
        const position = new google.maps.LatLng(
          location.latitude,
          location.longitude
        );
        const marker = new google.maps.Marker({
          position,
        });

        this.markers.push(marker);
      });
    },
  }
}
</script>

<style scoped>
.locations-map {
  width: 100%;
  height: 400px;
  margin: 0 0 40px 0;
  background: gray;
}
</style>

1 Ответ

0 голосов
/ 23 мая 2019

google должно быть в data. Таким образом, вы можете получить доступ к this.google в методах. (И если вы используете this.map, map также должно быть в data.)

Вот ваш код с этим изменением: 

<template>
  <div>
    <div class="locations-map" :id="mapName"></div>
  </div>
</template>

<script>
import gmapsInit from '@/utils/gmaps';

export default {
  name: "locations-map",
  props: ['name', 'locations', 'viewStatus'],
  data: function() {
    return {
      mapName: this.name + "-map",
      filteredLocationType: "all",
      markers: [],
      google: null,
      map: null
    };
  },
  computed: {
    filteredLocations: function() {
      if (this.filteredLocationType === "all") {
        return this.locations;
      } else if (this.filteredLocationType === "term") {
        return this.locations.filter(function(location) {
          return location.category === "Terminal";
        });
      } else if (this.filteredLocationType === "dl") {
        return this.locations.filter(function(location) {
          return location.category === "Drop Location";
        });
      } else {
        return null;
      }
    }
  },
  watch: {
    locations: function() {
      this.initMap();
      }
  },
  async mounted() {
      this.google = await gmapsInit();
      const map = document.getElementById(this.mapName)
      const options = {
        zoom: 4,
        center: new this.google.maps.LatLng(37.09024, -95.712891), // center of USA
        scrollwheel: false,
        mapTypeId: this.google.maps.MapTypeId.ROADMAP
      };

      this.map = new this.google.maps.Map(map, options);
  },
  methods: {
    initMap: function() {
      this.addLocationMarkers();
    },
    clearMarkers: function() {
      for (var i = 0; i < this.markers.length; i++) {
        this.markers[i].setMap(null);
      }
      this.markers = []; // reset markers
    },
    addLocationMarkers: function() {
      this.filteredLocations.forEach(location => {
        const position = new this.google.maps.LatLng(
          location.latitude,
          location.longitude
        );
        const marker = new this.google.maps.Marker({
          position,
        });

        this.markers.push(marker);
      });
    },
  }
}
</script>

<style scoped>
.locations-map {
  width: 100%;
  height: 400px;
  margin: 0 0 40px 0;
  background: gray;
}
</style>
...