从数据功能添加Google Maps InfoWindow会产生错误：“ b.get不是函数”

Question

我正在尝试向Google地图的每个功能添加一个信息窗口。在Google提供的示例（https://developers.google.com/maps/documentation/javascript/infowindows）中，他们将信息窗口直接添加到标记中。我没有明确的市场来添加我的信息窗口，相反，我有从GeoJson文件导入的数据集合。

我可以为每个功能添加一个单击侦听器，并使用正确的描述创建一个新的InfoWindow。但是，b.get is not a function打开InfoWindow时出现错误（）。

function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(28.7, -15.0),
    mapTypeId: 'terrain'
});

map.data.loadGeoJson('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson');

map.data.setStyle(function (feature) {
    var magnitude = feature.getProperty('mag');
    return {
        icon: getCircle(magnitude)
    };
});

map.data.addListener('click', function (event) {
    var infowindow = new google.maps.InfoWindow({
        content: event.feature.getProperty('place')
    });
    infowindow.open(map, event.feature);
});

Answer 1

我在发布的代码中收到的错误（一旦我包含所有缺少的部分）是 Uncaught TypeError: b.get is not a function

该InfoWindow.open方法的第二个参数必须是一个MVCObject，该MVCObject公开一个LatLngposition属性，在核心API中，唯一的一个是a google.maps.Marker（不是a event.feature）

从文档中：

打开（地图？：地图| StreetViewPanorama，锚点？：*） | 返回值：无
在给定的地图上打开此InfoWindow。（可选）InfoWindow可以与锚关联。在核心API中，唯一的锚点是Marker类。但是，锚点可以是任何公开LatLng位置属性的MVCObject，还可以是用于显示pixelOffset的Point anchorPoint属性（请参见InfoWindowOptions）。anchorPoint是从锚点位置到InfoWindow尖端的偏移量。

解决方法是设置以下位置InfoWindow：

map.data.addListener('click', function(event) {
  var infowindow = new google.maps.InfoWindow({
    content: event.feature.getProperty('place')
  });
  infowindow.setPosition(event.latLng);
  infowindow.open(map);
});

概念证明

代码段：

map.data.addListener('click', function(event) {
  var infowindow = new google.maps.InfoWindow({
    content: event.feature.getProperty('place')
  });
  infowindow.setPosition(event.latLng);
  infowindow.open(map);
});

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(28.7, -15.0),
    mapTypeId: 'terrain'
  });

  map.data.loadGeoJson('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson');

  map.data.setStyle(function(feature) {
    var magnitude = feature.getProperty('mag');
    return {
      icon: getCircle(magnitude)
    };
  });

  map.data.addListener('click', function(event) {
    var infowindow = new google.maps.InfoWindow({
      content: event.feature.getProperty('place')
    });
    infowindow.setPosition(event.latLng);
    infowindow.open(map);
  });
}
google.maps.event.addDomListener(window, "load", initMap);
// from google sample at: https://developers.google.com/maps/documentation/javascript/earthquakes 
function getCircle(magnitude) {
  return {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: 'red',
    fillOpacity: .2,
    scale: Math.pow(2, magnitude) / 2,
    strokeColor: 'white',
    strokeWeight: .5
  };
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}