Question

我正打算在我的Javascript项目中使用Google Map API VueJs，而无需使用此软件包https://www.npmjs.com/package/vue2-google-maps（因为我认为它太有限了）。 / p>

因此，在将我的Vue component注册到 app.js 后，我做了什么：

    require('./bootstrap');

    window.Vue = require('vue');

    const app = new Vue({
        el: '#app',
     });

    Vue.component(
       'map-component',
       require('./components/MapComponent.vue').default
     );

在 MapComponent.vue

中

            <template>

              <div id="map"></div>


            </template>

            <script>

              export default {

                data: function() {
                  return {
                  }
                },
                created() {
                  let googleApi = document.createElement('script');
                  googleApi.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyA.......S-3SvLw_-twW72Zg&callback='+this.initMap+'');
                  document.head.appendChild(googleApi);
                },
                mounted() {
                  initMap: function() {
                    var map;
                    map = new google.maps.Map(document.getElementById('map'), {
                      center: {lat: -34.397, lng: 150.644},
                      zoom: 8
                    });
                  }

                },

              }

            </script>

我还尝试将created()与mounted()切换，但显示相同的错误

没有错误的结果应在页面上显示Google地图。

感谢您的帮助

Aymeric

Answer 1

在Created this.initMap（）= function（）{...}

中尝试

您的代码将无法正常工作，因为您正在尝试访问尚未初始化的变量。在Vue中，首先执行创建的方法，然后执行安装的方法。

此处有更多信息：https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

错误：模块构建失败（来自./node_modules/babel-loader/lib/index.js）：语法错误：

1 个答案: