Vue Google Maps - Массив InfoWindows On Click Открыть детали InfoWindow - PullRequest
Новая
       38

Vue Google Maps - Массив InfoWindows On Click Открыть детали InfoWindow

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

Я в основном пытаюсь реализовать карту, похожую на Airbnb.Я отобразил массив информационных окон для отображения цены каждого пункта аренды.Когда я нажимаю на информационное окно, я затем отображаю другое информационное окно (названное popup) с деталями местоположений.

Однако я добавил обработчик событий к элементу infowindow, когда нажимаю ЛЮБОЕ из информационных окон наНа карте я получаю только всплывающее окно с последним результатом в массиве.

  methods: {
    initMap() {
      var map = new google.maps.Map(document.getElementById("camp-map"), {
        zoom: 2,
        center: { lat: this.latitude, lng: this.longitude },
        mapTypeId: 'satellite',
        zoomControl: true,
        zoomControlOptions: {
            position: google.maps.ControlPosition.RIGHT_BOTTOM
        },        
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        rotateControl: false,
        fullscreenControl: false
      });

      this.popup = new google.maps.InfoWindow({
        content: "nothing yet..."
      });

      return map;
    },

    addInfoWindows(map) {    
      // Get total lat & total lng to center the map on new results
      let totalLat = 0;
      let totalLng = 0;

      // Iterate over all of the camps
      for (var i = 0; i < this.filteredCamps.length; i++) {

        let latitude = this.filteredCamps[i].coordinates.lat;
        let longitude = this.filteredCamps[i].coordinates.lng;

        let id = this.filteredCamps[i].id;
        let slug = this.filteredCamps[i].slug;
        let name = this.filteredCamps[i].name;
        let price = this.filteredCamps[i].priceAvg.toLocaleString("en");
        let image = this.filteredCamps[i].mainImage;
        let country = this.filteredCamps[i].country;
        let type = this.filteredCamps[i].type;

        totalLat += parseFloat(latitude);
        totalLng += parseFloat(longitude); 

        // create a HTML element for each spot
        var el = document.createElement("div");
        el.innerHTML =
          '<div><div class="marker-tooltip"></div>$' + price + "</div>";

        el.className = "camp-map-marker";

        var infowindow = new google.maps.InfoWindow({
          content: el,
          position: { lat: latitude, lng: longitude },
          map: this.map,
        });

        // Create popup view
        var div = .... 

        this.popup = new google.maps.InfoWindow({
          content: div,
          position: { lat: latitude, lng: longitude },
        });

        // On infowindow click center and popup
        el.addEventListener("click", () => {
          console.log('clicked: ')
          this.map.setCenter({ lng: longitude, lat: latitude })
          this.popup.setContent(div);
          this.popup.open(this.map, infowindow) 
        });         

        this.gMarkers.push(infowindow);
      }

      let arrayLength = this.gMarkers.length
      let currentLat = totalLat / arrayLength
      let currentLng = totalLng / arrayLength
      this.map.setCenter({ lat: currentLat, lng: currentLng }); 
    },

1 Ответ

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

Вы делаете это в цикле, поэтому, когда цикл заканчивается, всплывающее окно имеет последнее значение: 

 this.popup = new google.maps.InfoWindow({
      content: div,
      position: { lat: latitude, lng: longitude },
    });

Отсюда: 

let latitude = this.filteredCamps[i].coordinates.lat;
let longitude = this.filteredCamps[i].coordinates.lng;

, где 

i = this.filteredCamps.length

когда цикл закончен.

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

Надеюсь, это поможет.

...