@Muslim05
junior Front-end разработчик

Как реализовать такую карту?

Добрый день)Помогите реализовать такую карту на google maps, в vue js. Не знаю как кластеризовать маркеры, и чтобы окошко над маркером отображала ту же инфу которая в боковой панели)
Смог сделать на googlemaps чтобы при клике появлялось окошко,но не знаю как реализовать боковую панель)

5f0f2d5f95d6e588214298.png
  • Вопрос задан
  • 95 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Muslim05 Автор вопроса
junior Front-end разработчик
<template>
  <div>
    <gmap-map :center="center" :zoom="zoom" ref="map">
      <gmap-marker
        :key="index"
        v-for="(location, index) in locations"
        :position="{ lat: location.lat, lng: location.lng }"
        :clickable="true"
        @click="openInfoWindow(location);"
      />
      <gmap-info-window
        v-if="selectedLocation !== null"
        :position="{ lat: selectedLocation.lat, lng: selectedLocation.lng }"
        :opened="infoBoxOpen"
        @closeclick="infoBoxOpen = false;"
      >
        <div class="infoWindow" style="width: 300px;">
          <h2 id="infoWindow-location">{{ selectedLocation.name }}</h2>
          <button @click="closeInfoWindow();">Close</button>
        </div>
      </gmap-info-window>
    </gmap-map>
  </div>
</template>

<script>
export default {
  data: () => ({
    zoom: 5,
    center: { lat: 59.339025, lng: 18.065818 },
    selectedLocation: null,
    infoBoxOpen: false,
    locations: [
      {
        Id: 1,
        name: "Oslo",
        lat: 59.923043,
        lng: 10.752839
      },
      {
        Id: 2,
        name: "Stockholm",
        lat: 59.339025,
        lng: 18.065818
      },
      {
        Id: 3,
        name: "Copenhagen",
        lat: 55.675507,
        lng: 12.574227
      },
      {
        Id: 4,
        name: "Berlin",
        lat: 52.521248,
        lng: 13.399038
      },
      {
        Id: 5,
        name: "Paris",
        lat: 48.856127,
        lng: 2.346525
      }
    ]
  }),
  methods: {
    openInfoWindow(location) {
      console.log(location);
      this.selectedLocation = location;
      this.infoBoxOpen = true;
    },
    closeInfoWindow() {
      this.infoBoxOpen = false;
    }
  }
};
</script>

<style>
.vue-map-container {
  height: 640px;
}
</style>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
09 авг. 2020, в 17:19
5000 руб./за проект
09 авг. 2020, в 17:11
15000 руб./за проект