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＆＃34; fieldDataGeoJSON ..＆＃34;您可能已经想到了返回GeoJSON。

效果很好：标记显示在地图上，位置很好。但是字段＆＃34; name＆＃34;和＆＃34;描述＆＃34; GeoJSON中存在的内容未链接到标记，这意味着当我单击标记时它们不会显示。

我想第一个问题是：＆＃34;它应该被支持吗？＆＃34;。如果没有，这是否意味着我必须解析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

GeoJSON Point name＆amp;使用Google Map API V3时不会显示说明

1 个答案: