Question

我正在重构一些Vue代码以显示Google地图。我不是从index.html调用Google Maps，而是从mount调用它。一切都很好，直到我尝试从方法中引用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>

Answer 1

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Catan</title> <script src="{{ url_for('static', filename="css/main.css")}}"></script> </head> <body> <canvas id="canvas" ></canvas> <script src="{{ url_for('static', filename="js/board.js")}}"></script> <script src="{{ url_for('static', filename="js/game.js")}}"></script> <script src="{{ url_for('static', filename="js/location.js")}}"></script> <script src="{{ url_for('static', filename="js/main.js")}}"></script> <script src="{{ url_for('static', filename="js/player.js")}}"></script> </body> </html>应该在google中。因此，您可以在方法中访问data。（而且，如果您使用this.google，则this.map也应位于map中。）

这是您进行此更改的代码：

data

无法从方法获取对范围变量的引用

1 个答案: