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

Question

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

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