Vue Google Maps - 单击打开详细信息信息窗口时的信息窗口数组答案

【问题标题】：Vue Google Maps - Array of InfoWindows On Click Open Details InfoWindowVue Google Maps - 单击打开详细信息信息窗口时的信息窗口数组
【发布时间】：2019-08-04 12:52:30
【问题描述】：

我基本上是在尝试实现与 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 }); 
    },

【问题讨论】：

标签： google-maps vue.js google-maps-api-3 vuejs2 infowindow

【解决方案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

当循环结束时。

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

希望，它会有所帮助。

【讨论】：