[英]Error: Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError:
I am tring to use the Google Map Javascript
API
into my VueJs
project WITHOUT using this package https://www.npmjs.com/package/vue2-google-maps (because it's too limited as I see it).我想在我的
VueJs
项目中使用 Google Map Javascript
API
,而不使用这个包https://www.npmjs.com/package/vue2-google-maps (因为我认为它太有限了)。
So here what I have done, after having register my Vue component
in app.js
:因此,在
app.js
中注册了我的Vue component
之后,我所做的就是:
require('./bootstrap');
window.Vue = require('vue');
const app = new Vue({
el: '#app',
});
Vue.component(
'map-component',
require('./components/MapComponent.vue').default
);
In MapComponent.vue在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>
I also tried to switch created()
with mounted()
, but it shows the same error我也尝试将
created()
与mounted()
切换,但它显示相同的错误
The result without error should show a Google map on the page.没有错误的结果应该在页面上显示谷歌地图。
Thanks for your help谢谢你的帮助
Aymeric艾美瑞克
Try this in Created this.initMap() = function() { ... }在 Created this.initMap() = function() { ... } 中试试这个
Your code will not work because you are trying to access a variable that is not initialized yet.您的代码将无法工作,因为您正在尝试访问尚未初始化的变量。 In Vue First created method is executed then mounted method.
在 Vue 中,首先执行创建的方法,然后执行挂载的方法。
More info here: https://v2.vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks更多信息在这里: https ://v2.vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.