Vue Google Maps - InfoWindows数组单击打开详细信息InfoWindow

Question

我基本上试图实现与Airbnb相似的非常相似的地图。我已经显示了一系列信息窗口来显示每个租赁地点的价格。当我点击infowindow时，我会显示另一个带有位置详细信息的infowindow（名为popup）。

我已经为infowindow元素添加了一个事件监听器，但是当我单击地图上的任何一个infowindows时，我只得到数组中最后一个结果的弹出窗口。

  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 }); 
    },

Answer 1

你在循环中执行它，所以当循环结束时，弹出窗口具有最后一个值：

 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

当循环结束时。

您需要为每个点创建一个新的弹出窗口（但它耗费资源），或者每次单击标记时创建一个新的弹出窗口。对于第二个函数，创建一个单独的函数，将一些数据传递给它并创建一个新的弹出窗口。

希望能帮助到你。