Блог

Я пытаюсь использовать API карт Google в своем проекте vue2, и я попробовал несколько способов, которые потерпели неудачу. После использования модуля vue2googlemaps и модуля node от Google я решил использовать CDN напрямую и добавить его на страницу индекса. Моя проблема сейчас в том, что для доступа к объекту Google, например, для создания маркера или чего-то подобного, мне нужно использовать this.marker = new window.google.maps.Marker() , например, но в руководствах, которые я видел, все используют непосредственно объект Google и никогда не используют его window . Я не могу понять, почему это происходит. Я был бы признателен, если бы кто-нибудь показал мне правильный способ импортировать или использовать эту библиотеку в Google.

Это потому, что код вашего шаблона компилируется и выполняется в области вашего экземпляра компонента ( vm он же ), а не в глобальной (он же ) области. window

Для использования google непосредственно в вашем шаблоне вы можете добавить следующие вычисленные:

 computed: {
  google: () => window.google
}
 

Если ваша проблема не google определена в компоненте <script> , простое решение — добавить его как a const вверху:

 import Vue from 'vue';
const google = window.google;

export default Vue.extend({
  computed: {
    google: () => google // also make it available in template, as `google`
  }
})
 

Еще более элегантное решение — научить webpack получать google из объекта window всякий раз, когда он импортируется в любой из ваших компонентов:

vue.config.js :

 module.exports = {
  configureWebpack: {
    externals: {
      google: 'window.google'
    }
  }
}
 

Это создает google пространство имен в вашей конфигурации webpack, чтобы вы могли импортировать из него в любой из ваших компонентов:

 import google from 'google';

//... 
  computed: {
    google: () => google // provide it to template, as `google`
  }
 

Почему я говорю, что это более элегантно?
Поскольку он отделяет компонент от контекста, и теперь вам не нужно изменять компонент при использовании в разных контекстах (т.Е. В среде тестирования, которая может даже не использовать браузер, поэтому у нее может быть не window объект, а global вместо него; все, что вам нужно будет сделать вв этом случае необходимо определить google пространство имен в этой среде, и именно оттуда ваш компонент получит свой google объект; но вам не придется настраивать или издеваться над какими-либо методами / свойствами компонента).