Question

我正在遍历第三方API的json结果集，并在Google地图上绘制位置。我有那部分工作。问题是，单击标记时，信息窗口会弹出一个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

要在评论中回答此问题，“它现在在弹出窗口中显示名称。但是如何获取它以显示实际地址，以及其他任何合法的Google地图一样显示其余信息？”

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

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

如何使Google Maps标记的信息窗口正常工作？

2 个答案: