инициализация 'marker-animate-unobtrusive' в Vue завершается неудачно

Question

Я пытаюсь использовать маркер-анимацию-ненавязчивый, но получаю эту ошибку:

Я нашел еще один пост на SO , в котором говорилось о требовании файла после загрузки Google, но я не знаю, как это сделать. в моем компоненте у меня есть это:

import SlidingMarker from 'marker-animate-unobtrusive'

В моем смонтированном методе у меня есть это:

SlidingMarker.initializeGlobally()

Любая помощь очень ценится

Answer 1

Это ожидаемая ошибка, поскольку SlidingMarker расширяет google.maps.Marker класс , необходимо сначала загрузить библиотеку JavaScript API GoogleMaps, один из вариантов - добавить ссылку через файл index.html:

<script src="https://maps.googleapis.com/maps/api/js?key=--KEY-GOES-HERE--"></script>   

Другой вариант - использовать асинхронный загрузчик JavaScript, например, scriptjs.Пример загрузки JavaScript API GoogleMaps и модуля marker-animate-unobtrusive может выглядеть следующим образом:

created: function(){
  get("https://maps.googleapis.com/maps/api/js?key=", () => {

    const SlidingMarker = require('marker-animate-unobtrusive')
    SlidingMarker.initializeGlobally()

    const map = new google.maps.Map(document.getElementById('map'), this.mapOptions);

    const marker = new SlidingMarker({
        position: this.mapOptions.center,
        map: map,
        title: 'Im sliding marker'
    });
 });

}

Вот пример для справки

Обновление

С vue-google-maps библиотека marker-animate-unobtrusive Плагин может быть интегрирован так:

<template>
  <div>
    <GmapMap :center="center" :zoom="zoom" ref="mapRef"></GmapMap>
  </div>
</template>

<script>

/* global google */

export default {
  data() {
    return {
      zoom: 12,
      center: { lat: 51.5287718, lng: -0.2416804 },
    };
  },
  mounted: function() {
     this.$refs.mapRef.$mapPromise.then(() => {
        this.initSlidingMarker(this.$refs.mapRef.$mapObject)
    })
  },
  methods: {
    initSlidingMarker(map){
       const SlidingMarker = require('marker-animate-unobtrusive')
       SlidingMarker.initializeGlobally()


       const marker = new SlidingMarker({
            position: map.getCenter(),
            map: map,
            title: 'Im sliding marker'
       });

       google.maps.event.addListener(map, 'click', (event) => {
          marker.setDuration(1000);
          marker.setEasing('linear');
          marker.setPosition(event.latLng);
       });
    }
  }
}
</script>

<style>
.vue-map-container {
  height: 640px;
}
</style>

Answer 2

Установите пакет google из npm, это должно исправить.