OverlappingMarkerSpiderfier не определен (Vue.js) - PullRequest
0 голосов
/ 23 мая 2019

Я пытаюсь реализовать OverlappingMarkerSpiderfier для моих Карт Google, и он работает, потому что мои маркеры могут "паучить", когда я нажимаю на маркер.

Моя проблема в том, что в моей консоли разработчика наVS Code, ESLint по-прежнему выдает сообщение об ошибке: «OverlappingMarkerSpiderfier» не определен.Я действительно не знаю, в чем проблема, так как мои маркеры работают, как задумано, когда я нажимаю на них.Ниже приведено изображение, показывающее, что OverlappingMarkerWorkers даже при наличии ошибки от ESLint:

enter image description here

Я хочу избавиться от ошибки в случае ошибки в будущемвозникает из-за этого.Я искал решения, и многие люди отмечали, что OverlappingMarkerSpiderfier должен быть загружен после загрузки Google Maps.Я сделал это, но ошибка все еще сохраняется.

Я загружаю свои Карты Google асинхронно;ниже мой файл .js, который загружает Карты Google и OverlappingMarkerSpiderfier:

import api_keys from './api_keys'

const API_KEY = api_keys.google_maps_api_key;
const CALLBACK_NAME = 'gmapsCallback';

let initialized = !!window.google;
let resolveInitPromise;
let rejectInitPromise;

const initPromise = new Promise((resolve, reject) => {
  resolveInitPromise = resolve;
  rejectInitPromise = reject;
});

export default function init() {
  if (initialized) return initPromise;

  initialized = true;

   window[CALLBACK_NAME] = () => resolveInitPromise(window.google);

   const script = document.createElement('script');
   script.async = true;
   script.defer = true;
   script.src = `https://maps.googleapis.com/maps/api/jskey=${API_KEY}&callback=${CALLBACK_NAME}`;
   script.onerror = rejectInitPromise;
   document.querySelector('head').appendChild(script);

   const spiderfier = document.createElement('script');
   spiderfier.defer = true;
   spiderfier.src = "https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js";
   spiderfier.onerror = rejectInitPromise;
   document.querySelector('head').appendChild(spiderfier);

   return initPromise;
}

Ниже мой компонент GoogleMaps.Реализация OverlappingMarkerSpiderfier находится в «watch»:

<template>
    <div id="google-map">

    </div>
</template>

<script>
import gMaps from '../lib/gMaps.js'

export default {
    name: 'GoogleMaps',
    props: {
        events: Array
    },
    data() {
        return {
            map: null,
            locations: []
        }
    },
    async mounted() {
        try {
            const google = await gMaps();
            const geocoder = new google.maps.Geocoder();
            this.map = new google.maps.Map(this.$el);

            geocoder.geocode({ address: 'USA'}, (results, status) => {
                if (status !== 'OK' || !results[0]) {
                    throw new Error(status);
                }

                this.map.setCenter(results[0].geometry.location);
                this.map.fitBounds(results[0].geometry.viewport);
            });
        } catch (error) {
            console.error(error);
        }
    },
    watch: {
        async events() { //creates markers for the map; data is from a 3rd party API that is handled by a different component
            try {
                const google = await gMaps();

                var oms = new OverlappingMarkerSpiderfier(this.map, {
                    markersWontMove: true,
                    markersWontHide: true,
                    basicFormatEvents: true
                })

                for(let i = 0; i < this.events.length; i++) {
                    let marker = new google.maps.Marker({
                        position: {
                            lat: parseInt(this.events[i].latitude, 10),
                            lng: parseInt(this.events[i].longitude, 10)
                        },
                        map: this.map,
                        title: this.events[i].title
                    })

                    let iw = new google.maps.InfoWindow({
                        content: this.events[i].description || 'No description available.'
                    });

                    google.maps.event.addListener(marker, 'spider_click', function() {
                        iw.open(this.map, marker);
                    });

                    oms.addMarker(marker);
                }
            }
            catch(error) {
                console.error(error)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
#google-map {
    width: auto;
    height: 100vh;
}
</style>
...