GeoJSON点名&使用Google Map API V3时不显示描述

GeoJSON Point name & description not displayed when using Google Map API V3

本文关键字：V3 显示 描述 API Map 点名 使用 Google GeoJSON      更新时间：2023-09-26

我开始使用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中出现的字段"name"answers"description"没有链接到标记，这意味着当我单击标记时不会显示它们。

我猜第一个问题是:"它应该被支持吗?"如果没有，是否意味着我必须解析GeoJSON以添加名称和描述?你对如何做到这一点有什么建议吗?

提前感谢您的帮助!

正常的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);
工作示例

相关文章：