Cоздаём компонент карт Google Maps API с помощью VueJs2

[acupofspirt]

А вы точно открывали в браузере этот компонент перед написанием статьи? Vue вроде как не разрешает использовать тэг script в своих шаблонах. Будет ошибка навроде: "Avoid placing tags with side-effects in your templates, such as script, as they will not be parsed."

А если вы это каким-то образом заведёте, то при повторном монтировании такого компонента сама библиотека GMaps поругается: "You have included the Google Maps API multiple times on this page. This may cause unexpected errors."

[BRAINKIT]

Открывал, конечно.
Для написания статьи я использовал сборку vue на основе nuxtjs.org. Подобной ошибки не было. Если возможно — дайте пруф линк на информацию, где описано, что тег script запрещён в шаблонах vue, интересно.

[acupofspirt]

medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8

[acupofspirt]

У меня не то что ошибка в консоли, даже вебпак отказывается билдить проект если тэги script/style использовать в шаблонах.

[bohdan-shulha]

Не могу судить, насклько vue-матичен код в статье, но вместо

const element = document.getElementById(this.name)

лучше использовать ref

vuejs.org/v2/api/#ref

Как минимум, это позволить разместить более одного компонента на странице.

[BRAINKIT]

Строка выше — это получение div`a карты, у которого id является свойством компонента — name. Передаётся name из index файла при подключении компонента в строке:

<google-map :name="name"></google-map>

Соответственно, меняя параметр name мы можем разместить несколько компонентов карт на 1 странице. А что бы маркеры были разные, массив маркеров нужно вынести в свойства компонента props аналогично name и, аналогично name задать отдельные массивы маркеров. В статье я упомянул про эту возможность.

[bohdan-shulha]

Да, это я понимаю. Но зачем заставлять придумывать уникальный ID (пусть даже сгенерированный или полученый любым другим способом), если этого можно не делать? Тем более, что сам фреймворк (можете кидать тапками) предоставляет инструмент, который гарантированно будет работать в любых условиях?

[BRAINKIT]

Согласен, с помощью ref логичнее сделать!

[letovlive]

refs лучше вообще использовать в крайнем случае, так как нарушается сам принцип атомарности компонента, здесь же можно просто искать в самом компоненте через this.$el.

[kleinmaximus]

Наверное, лучше будет вынести поля options из mounted в props и указать там значения по умолчанию для координат и коэффициента увеличения.

И почему Вы подключаете API Гугл.Карт напрямую через script? Мне кажется, это должно автоматически происходить во время первого подключения компонента к странице (смотрим тут — github.com/vuejs/awesome-vue#map). Либо нужно передавать зависимость от API карт (google.map) через параметр компонента, а то у Вас появляется жесткая связанность.

[BRAINKIT]

Согласен со всем выше сказанным. Но! В рамках статьи я хотел описать максимально простой вариант компонента с минимальным количеством кода, что бы было общее понимание концепции. Если интересно — могу улучшить код с точки зрения правильности/стандартов написания и написать статью для динамической карты объектов в которой массив vue будет связан с маркерами карты, при изменении массива — будут сразу меняться маркеры на карте.

[vintage]

Если вы берётесь писать обучающие статьи, то в них и надо показывать как делать правильно, а не абы как.

[BRAINKIT]

Я уже ответил выше

[bjornd]

Только не понятно при чем здесь вообще Vue, никаких особенностей фреймворка не продемонстрировано, а самые интересные вещи начинаются когда данные модифицируются. Как раз для обработки изменений в данных нужны современные client-сайдовые фреймворки. С помощью React например реализация динамических компонент на основе Google Maps или Leaflet с развесистой иерархией дочерних компонентов реализуется достаточно удобно. Если вкратце, то каждый слой, маркер, path это отдельный React-компонент, он создает необходимые DOM-элементы и добавляет события при инициализации, очищает все что нужно при удалении. Всю остальную работу (когда и что нужно создать, удалить, заменить) выполняет React. Получаются удобные в использовании компоненты для фреймворка, API которых не сильно отличается от родного (Google Maps, Leaflet). Интересно как бы все это было реализовано на Vue.

[BRAINKIT]

Опишу в следующей статье.

[letovlive]

чтобы eslint работал, необходимо в .eslintrc.js добавить google в globals.

[zmeykas]

интересно что в руководстве говорится о

VueJs2 с использованием es6

но синтаксис методов компонента в стиле es5:
data: function () {}
вместо
data() {}

[BRAINKIT]

Синтаксис методов на основе:

data() {}

в es6 не обязателен, при желании можно использовать и синтаксис

data: function () {}

[zmeykas]

Ну в этом и была суть данного нововведения в ES6 — упростить синтаксис. Я не пытаюсь сказать что в вашей статье сделано не правильно, я говорю что можно лучше.

[Kasheftin]

Почему бы просто не взять vue-google-maps?

[BRAINKIT]

Во-первых: в статье я хотел описать для новичков в vue как создать компонент или для профессионалов, которые хотят посмотреть как работает vue.
Во-вторых: на мой взгляд vue-google-maps избыточен, не всем и не всегда нужен весь функционал api google карт.

[zelsky]

Такой вопрос а можно ли в vue google maps после перехода (маркер как линк) сделать центром карт. позицию маркера?

[BRAINKIT]

Если имеется ввиду компонент из статьи, а не vue2-google-maps, то нет. Опишу в следующей статье как сделать данный функционал.

[zelsky]

Спасибо.