如何让谷歌地图标记的信息窗口工作？

Question

我正在循环访问来自第三方API的json结果集，并在谷歌地图上绘制位置。我有这部分工作。问题是当单击标记时，信息窗口会弹出一个 x，而不是显示位置的名称。下面是我的大部分代码，这是我做控制台.log(位置(时的结果：

 0: {lat: 39.3279, lng: 74.5035}
 1: {lat: 40.402387, lng: 47.210994}
 2: {lat: 48.63333, lng: 2.3}

我需要帮助来理解我做错了什么。谢谢

$.ajax({
url: 'api/id',   
success: function (result) {   
  for (const row of result.payload) {
 locations.push({lat: row.latitude, lng: row.longitude});
  }
  console.log(locations);
 for (i = 0; i < locations.length; i++) {  
    console.log(locations.length);
    marker=  new google.maps.Marker({
      position: {lat: locations[i].lat, lng: locations[i].lng},
      map: map,
      data: {
       name: locations[i][0]
       }
    });
   marker.addListener('click', function() {
     console.log('click');
      if(!this.infoWindow) {
       this.infoWindow = new google.maps.InfoWindow({
         content: this.data.name            
       });
      }
      this.infoWindow.open(map,this);
    })
  };
},
 error: function (jqXhr, textStatus, errorThrown) {
  console.log(errorThrown);
   }
 })
 }

Answer 1

要在评论中回答这个问题" 它现在在弹出窗口中显示名称。但是，如何让它像任何其他合法的谷歌地图一样显示实际地址和其余信息？">

您需要对正在使用的坐标进行反向地理编码，以显示实际地址。您可以参考中的示例：

https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse

 function geocodeLatLng(geocoder, map, infowindow) {
    var input = document.getElementById('latlng').value;
    var latlngStr = input.split(',', 2);
    var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
    geocoder.geocode({'location': latlng}, function(results, status) {
      if (status === 'OK') {
        if (results[0]) {
          map.setZoom(11);
          var marker = new google.maps.Marker({
            position: latlng,
            map: map
          });
          infowindow.setContent(results[0].formatted_address);
          infowindow.open(map, marker);
        } else {
          window.alert('No results found');
        }
      } else {
        window.alert('Geocoder failed due to: ' + status);
      }
    });
  }

Answer 2

我会像这样使用信息窗口：

$.ajax({
    url: 'api/id',   
    success: function (result) {   
        for (const row of result.payload) {
            locations.push({lat: row.latitude, lng: row.longitude});
        }
        console.log(locations);
        for (i = 0; i < locations.length; i++) {  
            console.log(locations.length);
            marker=  new google.maps.Marker({
                position: {lat: locations[i].lat, lng: locations[i].lng},
                map: map,
                data: {
                    name: locations[i][0]
                }
             });
             var infowindow = new google.maps.InfoWindow({
                  content: locations[i][0]
             });
             marker.addListener('click', function() {
                  infowindow.open(map, marker)
             })
       };
   },
   error: function (jqXhr, textStatus, errorThrown) {
       console.log(errorThrown);
   }
})