Vue Import Js file Ошибка наложения карт Google при вызове в браузере - PullRequest
Новая
       3

Vue Import Js file Ошибка наложения карт Google при вызове в браузере

0 голосов
/ 26 февраля 2019

ребята, я использую наложение Google Maps, которое я импортирую в VueJs как 

import CustomMarker from "@/components/maps/CustomMarkerClass";

, а внутри CustomMarkerClass.js у меня есть код внутри Class 

function CustomMarker(google, latlng, map, count, status, modems, vueThis) {
  this.latlng = new google.maps.LatLng(latlng); 

  this.setMap(map);
  this.vueThis = vueThis;
  this.count = count;
  this.status = status;
  this.modems = modems;   

}
CustomMarker.prototype = new google.maps.OverlayView();
......

Vue RouterКонфиг для URL 

......
{
      path: "/map",
      name: "MapMarkers",
      alias: ["/map&zoom*"],
      component: MarkersMap,
      beforeEnter(to, from, next) {
        checkLocalStorage();
        next();
      }
    }
.......

, когда я звоню http://localhost/8080/map, он работает нормально, но когда я собираю проект и загружаю его на сервер, я получаю ошибку, когда я звоню http://mydomain/map

vue-router.esm.js: 1897 ReferenceError: Google не определен в Object.GT + g (CustomMarkerClass.js: 16) в c (начальная загрузка 160a9f95e986b8311f12: 54)

Я импортирую скрипт API Google Maps через асинхронный вызов в смонтированном MarkersMap и жду его инициализации, чтобы позже нарисовать пользовательские маркеры.Немного странно, что он работает на localhost, но при сборке вызывает ошибку при переходе на прямой URL

1 Ответ

0 голосов
/ 03 марта 2019

проблема была решена с помощью обещаний при вызове скрипта Google Maps.Рекомендую эту статью http://javascript.info/promise-basics

gmaps.js: 

const API_KEY = "your API key";

const CALLBACK_NAME = "initMap";

let initialized = !!window.google;

export default function init() {
  return new Promise((resolve, reject) => {
    if (initialized) {
      return resolve(window.google);
    }

    initialized = true;
    // The callback function is called by
    // the Google Maps script if it is
    // successfully loaded.
    window[CALLBACK_NAME] = () => resolve(window.google);
    // We inject a new script tag into
    // the `<head>` of our HTML to load
    // the Google Maps script.
    const script = document.createElement("script");
    script.async = true;
    script.defer = true;
    script.src = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&callback=${CALLBACK_NAME}`;
    script.onload = () => {
      resolve(window.google);
    };
    script.onerror = () => reject(new Error("Script load error: " + src));
    document.querySelector("head").appendChild(script);
  });
}

VueRouter 

import gmapsInit from "@/components/maps/gmaps.js";
......

{
      path: "/map",
      name: "MapMarkers",
      alias: ["/map&zoom*"],
      component: MarkersMap,
      beforeEnter(to, from, next) {
        checkLocalStorage();            
        gmapsInit()
          .then(success => next())
          .catch(error => console.log("error to load google script"));
      }
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...