Пользовательские информационные окна Google Maps

/resources/assets/js/components/cafes/CafeMap.vue — это место, где будет находиться вся логика нашей карты. В методе buildMarkers() мы создаем все маркеры. Что ж, нам нужно привязать информационные окна к маркеру, так что здесь будет происходить наше кодирование.

Во-первых, нам нужно будет добавить массив infoWindows к данным для компонента CafeMap.vue. Мы будем хранить все наши информационные окна в этом массиве, чтобы мы могли вызывать методы для них, когда это необходимо. Теперь наши данные должны выглядеть так:

data(){
  return {
    markers: [],
    infoWindows: []
  }
},

Затем перейдите к методу buildMarkers() в цикле for. Там найдите объявление маркера. Ниже мы добавим следующий код:

/*
  Create the info window and add it to the local
  array.
*/
let infoWindow = new google.maps.InfoWindow({
  content: this.cafes[i].name
});

this.infoWindows.push( infoWindow );

Что это делает, так это объявляет объект информационного окна, который объявляет название кафе. Если посмотреть в Google Docs: Информация Windows | API JavaScript Карт Google | Google Developers для информационных окон, вы можете добавить разметку HTML и действительно настроить внешний вид информационного окна. Мы будем делать это в обновлении обновления стиля, но сейчас мы просто получаем информационное окно для отображения.

Теперь нам просто нужно привязать щелчок к маркеру, чтобы открыть информационное окно. Для этого прямо под последним добавленным кодом добавьте:

/*
  Add the event listener to open the info window for the marker.
*/
marker.addListener('click', function() {
  infoWindow.open(this.map, this);
});

Что это делает, так это то, что когда пользователь нажимает на маркер, он открывает информационное окно на карте над this, которое ссылается на маркер.

Когда вы нажимаете на один из маркеров на карте, вы должны увидеть информационное окно с названием кафе, которое оно представляет, как показано ниже:

Вывод

Добавить информационное окно довольно просто, сделать его красивым тоже несложно, так как мы будем использовать HTML. В следующей части урока мы проведем капитальный ремонт дизайна и любые изменения, которые я задокументирую в этом уроке. А пока наслаждайтесь информационным окном Google Maps на своей карте и обязательно ознакомьтесь с кодом здесь: GitHub — serversideup/roastandbrew.

Привет! Мы пишем книгу по разработке приложений на основе API. Узнай первым, как только он будет готов! Зарегистрируйтесь здесь: Регистрация для разработки приложений на основе API