Question

我的VueJS / Laravel应用程序没有像我预期的那样正确加载到GoogleMaps中。我不明白为什么不调用回调。该功能可用，应加载。你能帮助我吗？我没有发现我的错误。我不希望看到地图，因为我在init中只有chart.update({ tooltip: { style: { display: "block", } } });，但即使这个也没有被调用。打开完整的Google网址时出现错误消息：

Google Maps API服务器拒绝了您的请求。非法请求。无效的回调＆＃39;参数。

consol.log

HTML

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

主要JS

<!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>

GIS VUE

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");
    }
  }
});

Answer 1

更改

<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;）

唯一的变化是将async和defer移到API网址之外

GoogleMaps无效的回调参数

1 个答案: