无法从方法获取对限定作用域的变量的引用
无法从方法获取对限定作用域的变量的引用
提问于 2019-05-23 06:26:49
我正在重构一些用于显示Google地图的Vue代码。我不是从index.html调用Google Maps，而是从挂载调用它。在我尝试从一个方法中引用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
Stack Overflow用户
发布于 2019-05-23 07:37:35
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56265785
复制相关文章
相似问题