gpt4 book ai didi

javascript - GoogleMaps 回调参数无效

转载 作者:太空宇宙 更新时间:2023-11-04 15:40:42 26 4
gpt4 key购买 nike

我的 VueJS/Laravel 应用程序没有像我预期的那样正确加载到 GoogleMaps 中。我不明白为什么不调用回调。该功能可用并且应该加载。你能帮助我吗?我没有发现我的错误。我不希望看到 map ,因为我在 init 中只有一个 consol.log ,但即使这样也没有被调用。当我打开完整的谷歌网址时,错误消息是:

The Google Maps API server rejected your request. Invalid request. Invalid 'callback' parameter.

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places,geometry&callback=App.init async defer"></script>

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INSPINIA - @yield('title') </title>


<link rel="stylesheet" href="{!! asset('css/vendor.css') !!}" />
<link rel="stylesheet" href="{!! asset('css/app.css') !!}" />

</head>
<body>

<!-- Wrapper-->
<div id="wrapper">

<!-- Navigation -->
@include('layouts.navigation')

<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg">

<!-- Page wrapper -->
@include('layouts.topnavbar')

<!-- Main view -->
@yield('content')

<!-- Footer -->
@include('layouts.footer')

</div>
<!-- End page wrapper-->

</div>
<!-- End wrapper-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.min.js"></script>
<script src="{!! asset('js/app.js') !!}" type="text/javascript"></script>
<script src="{!! asset('js/main.js') !!}" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places,geometry&callback=App.init async defer"></script>
@section('scripts')
@show

</body>
</html>

主要 JS

const GISView = require('./components/GISView.vue');

window.Vue = Vue;
window.Event = new class {
constructor() {
this.Vue = new Vue();
}

fire(event, data = null) {
this.Vue.$emit(event, data);
}

listen(event, callback) {
this.Vue.$on(event, callback);
}
};

var App = window.App = new Vue({
el: '#app',
components: {
GISView: GISView
},
data: {},
methods: {
init: function() {
console.log("OK");
}
}
});

GIS VUE

<template>
<div id="map"></div>
</template>
<script>
import GoogleMaps from '../mixins/GoogleMaps.js';

export default {
mixins: [GoogleMaps],
data: {
test: 1
},
mounted() {
this.initMap();
},
methods: {
initMap: function() {
this.map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 83.298, lng: 35.555},
scollwheel: false,
zoom: 4
})
}
}
}
</script>
#map {height:300px;width:500px;}

最佳答案

改变

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places,geometry&callback=App.init async defer"></script>

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places,geometry&callback=App.init" async defer ></script>

并且请确保您的 API key 不是 KEY ;)

唯一的变化是将 asyncdefer 移至 API URL 外部

关于javascript - GoogleMaps 回调参数无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43892433/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com