本文介绍了Google Places AutoComplete API错误,";Google未定义";的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用使用Vue的Google Places和Maps API搭建一个简单的原型。
在index.html中,我在网络选项卡中添加了脚本标记、库和API密钥,得到200个响应。
<script src="https://maps.googleapis.com/maps/api/js?key=My-api-key&libraries=places" async defer></script>
在App.vue中,我添加了以下
<input ref="autocomplete" type="text" />
...
<script>
export default {
name: "App",
data() {
return {
autocomplete: "",
};
},
methods: {},
mounted() {
const center = { lat: 40.84498856765032, lng: -73.71060855293794 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
north: center.lat + 0.1,
south: center.lat - 0.1,
east: center.lng + 0.1,
west: center.lng - 0.1,
};
const originAutoComplete = google.maps.places.AutoComplete(
this.$refs["autocomplete"],
{
bounds: defaultBounds,
}
);
originAutoComplete.addListener("place_changed", () => {
console.log(originAutoComplete.getPlace());
});
如何解决此错误?有没有办法在App.vue脚本标记中对其进行初始化?示例google developers youtube运行得很好,但我想在Vue上下文中实现它。另一个注意事项是,我尝试在.google之前添加窗口,没有骰子。
更新%1
按照您的建议,我安装了googlemaps api loader和App.vue:
<script>
import { Loader } from "@googlemaps/js-api-loader";
const loader = new Loader({
apiKey: "AIzaSyCcm7G8xLfijhdYDyA6xD-4kNiNP_8GbY8",
version: "weekly",
libraries: ["places"],
});
export default {
name: "App",
data() {
return {
autocomplete: "",
};
},
methods: {
printData() {
console.log(this.$refs["autocomplete"].value);
},
},
async mounted() {
let origin;
const center = { lat:40.84498856765032, lng:-73.71060855293794 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
north: center.lat + 0.1,
south: center.lat - 0.1,
east: center.lng + 0.1,
west: center.lng - 0.1,
};
loader
.load()
.then((google) => {
origin = new google.maps.places.Autocomplete(
this.$refs["autocomplete"],
{
types: ["cities"],
defaultBounds,
fields: ["place_id", "geometry", "name"],
}
);
origin.addListener("place_changed", () => {
console.log(origin.getPlace());
});
})
.catch((e) => {
console.log(e);
// do something
});
现在此问题是未显示选项下拉列表。
推荐答案
问题是您的Vue App JS在Google Maps JS之前加载。有一些选项:
- 通过删除异步并推迟脚本,阻止在Google地图上加载您的应用程序。删除异步/延迟后,请确保脚本标记位于Vue JS之上。
- 合并回调参数或仅检查VUE组件中是否存在
window.google
,并允许VUE在可用时进行更新。 - 在Vue组件中使用@googlemaps/js-api-loader。有关合并的方式,请参阅Is `async/await` available in Vue.js `mounted`?。
我推荐选项3。
这篇关于Google Places AutoComplete API错误,";Google未定义";的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!