javascript - 使用 Google Map API V3 时不显示 GeoJSON 点名称和描述

Question

我开始使用 Google Map Javascript API V3，并希望使用 GeoJSON 在 map 上显示标记。我的 GeoJSON 如下:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [153.236112, -27.779627]
            },
            "properties": {
                "name": "[153.236112, -27.779627]",
                "description": "Timestamp: 16:37:16.293"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [153.230447, -27.777501]
            },
            "properties": {
                "name": "[153.230447, -27.777501]",
                "description": "Timestamp: 16:37:26.298"
            }
        }
    ]
}

还有我加载 GeoJSON 的 JavaScript 代码:

var map;
var marker;

function initialize() {
    // Create a simple map.
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 14,
        center: ${lastPosition}
    });

    // Load the associated GeoJSON
    var url = 'fieldDataGeoJSON';
    url += '?deviceId=' + deviceId + '&fieldId=' + fieldId;
    map.data.loadGeoJson(url);
}
google.maps.event.addDomListener(window, 'load', initialize);

注意:URL“fieldDataGeoJSON..”返回 GeoJSON，您可能已经知道了。

效果很好:标记显示在 map 上的正确位置。但是 GeoJSON 中的“名称”和“描述”字段没有链接到标记，这意味着当我单击标记时它们不会显示。

我想第一个问题是:“它应该得到支持吗？”。如果不是，是否意味着我必须解析 GeoJSON 才能添加名称和描述？您对如何实现这一目标有任何提示吗？

预先感谢您的帮助!

Answer 1

普通 Google Maps Javascript API v3 event listeners正常工作infowindows .

var map;
var infowindow = new google.maps.InfoWindow();

function initialize() {
    // Create a simple map.
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 14,
        center: new google.maps.LatLng(-27.779627,153.236112)
    });
    google.maps.event.addListener(map, 'click', function() {
      infowindow.close();
    });

    // Load the associated GeoJSON
    var url = 'http://www.geocodezip.com/fieldDataGeoJSON.txt';
    map.data.loadGeoJson(url);

  // Set event listener for each feature.
  map.data.addListener('click', function(event) {
     infowindow.setContent(event.feature.getProperty('name')+"<br>"+event.feature.getProperty('description'));
     infowindow.setPosition(event.latLng);
     infowindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
     infowindow.open(map);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

working example