Я работаю над пустым проектом и пытаюсь создать компонент карты, используя карты Google и плагин https://www.npmjs.com/package/vue2-google-maps. Я установил плагин с помощью npm
На моей странице index.html у меня есть нормально работающая страница, которая выглядит следующим образом:
<template>
<div>
<br>
<br>
<Card/>
<br>
<br>
<br>
<br>
<!-- <Googlemap/> -->
<Panel/>
<Four/>
</div>
</template>
<script>
import Panel from '~/components/panel.vue'
import Card from '~/components/detailCard.vue'
// import GoogleMap from '~/components/googleMap.vue'
export default {
components: {
Panel,
Card,
// GoogleMap
}
}
</script>
Когда я раскомментирую 3 строки с Google Map в них, я получаю ошибку на скриншоте.
Компонент Googlemap:
<template>
<GmapMap
:center="{lat:10, lng:10}"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GmapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
@click="center=m.position"
/>
</GmapMap>
</template>
<script>
import Vue from "vue";
import * as VueGoogleMaps from "vue2-google-maps";
Vue.use(VueGoogleMaps, {
load: {
key: "MYTOKEN",
libraries: "places"
}
});
export default {
}
</script>
<style>
</style>
Что я делаю не так?
Редактировать:
2 ответа
Скорее всего вы пропустили транспиле
transpile: [/^vue2-google-maps($|\/)/]
Часто это относится к ответу на запрос, где ожидался объект JSON, но вместо этого возвращается HTML. <
ссылается на первый символ в <!DOCTYPE
... или подобном.
Проверьте ответы от API или других сервисов, которые вы используете.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.