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

Question

我开始使用Google Map Javascript API V3并希望使用GeoJSON在地图上显示标记.我的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"
            }
        }
    ]
}

我的JavaScript代码加载GeoJSON:

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,正如您可能已经想到的那样.

这很有效:标记显示在地图上,位置很好.但是GeoJSON中存在的"名称"和"描述"字段没有链接到标记,这意味着当我单击标记时它们不会显示.

我想第一个问题是:"它应该被支持吗？".如果没有,这是否意味着我必须解析GeoJSON以添加名称和描述？你有任何关于如何实现这一目标的提示吗？

预先感谢您的帮助!

Answer 1

正常的Google Maps Javascript API v3 事件侦听器可以正常工作,就像普通的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);

工作实例