如何使用 JSON 文件中的内容填充 Google Maps API InfoWindow答案

【问题标题】：How to populate Google Maps API InfoWindow with content from JSON file如何使用 JSON 文件中的内容填充 Google Maps API InfoWindow
【发布时间】：2020-08-07 11:14:04
【问题描述】：

我已经（无休止地）搜索了论坛，尝试了我找到的所有内容，但没有任何效果。我有以下代码。我希望能够单击其中一个标记并弹出一个带有从相应 JSON 派生的唯一内容的 InfoWindow 弹出窗口，以便该窗口具有位置、日期时间和详细信息，并且我可以使用不同的 html/css 来定位它们。没有任何效果。有什么帮助吗？

HTML

<head>
<title>Data Layer: Simple</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="mymap"></div>

<script type="text/javascript" src="script.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=REDACTED&callback=initMap">
</script>

</body>

</html>

CSS

@charset "UTF-8";

  #mymap {
        height: 100%;
      }

 html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

JAVASCRIPT

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

function initMap() {
        ufomap = new google.maps.Map(document.getElementById('mymap'), {
          zoom: 4,
          center: {lat:37.0902,lng:-95.7129}
        });

        ufomap.data.loadGeoJson('json.geojson');

        }

JSON

{
   "type":"FeatureCollection",
   "features":[
      {
         "type":"Feature",
         "properties":{
            "Location":"Greensburg, PA",
            "Date-Time":"1969-01-01T10:00:00",
            "Shape”:”Circle”,
            "Details":"Possible contact with Visitor as a child When I was 2 to 4 years old",
            "Latitude":"40.33569572",
            "Longitude":"-79.55026848"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[
               -79.550268,
               40.335696
            ]
         }
      },
{
   "type":"FeatureCollection",
   "features":[
      {
         "type":"Feature",
         "properties":{
            "Location”:”Smithtown, PA",
            "Date-Time":"1979-01-01T10:00:00",
            "Shape”:”Square”,
            "Details”:”Bright lights flashing“,
            "Latitude":"44.33569572",
            "Longitude":"-78.55026848"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[
               -78.550268,
               44.335696
            ]
         }
      }

【问题讨论】：

标签： javascript json api google-maps google-maps-api-3

【解决方案1】：

您的 GeoJSON 无效（JavaScript 控制台中报告了错误）。通过geojsonlint.com 运行它并修复任何错误（或修复JavaScript 控制台中报告的错误）。您发布的内容已修复：

{
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "properties": {
        "Location": "Greensburg, PA",
        "Date-Time": "1969-01-01T10:00:00",
        "Shape": "Circle",
        "Details": "Possible contact with Visitor as a child When I was 2 to 4 years old",
        "Latitude": "40.33569572",
        "Longitude": "-79.55026848"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -79.550268,
          40.335696
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "Location": "Smithtown, PA",
        "Date-Time": "1979-01-01T10:00:00",
        "Shape": "Square",
        "Details": "Bright lights flashing",
        "Latitude": "44.33569572",
        "Longitude": "-78.55026848"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -78.550268,
          44.335696
        ]
      }
    }
  ]
}

如果我验证有效，并使用相关问题中的代码：Google maps API getting infowindow on click with geojson file，它可以工作（但对 InfoWindow 的 pixelOffset 稍作调整会更好）。

proof of concept fiddle

工作代码 sn-p：

var ufomap;

function initMap() {
  ufomap = new google.maps.Map(document.getElementById('mymap'), {
    zoom: 4,
    center: {
      lat: 37.0902,
      lng: -95.7129
    }
  });
  var infowindow = new google.maps.InfoWindow();
  // ufomap.data.loadGeoJson('json.geojson');
  ufomap.data.addGeoJson(geoJson);
  ufomap.data.addListener('click', function(event) {
    console.log(event);
    // Location, Date-Time, and Details
    let location = event.feature.getProperty('Location');
    let datetime = event.feature.getProperty('Date-Time');
    let details = event.feature.getProperty('Details');
    let html = location + "<br>" + datetime + "<br>" + details;
    infowindow.setContent(html); // show the html variable in the infowindow
    infowindow.setPosition(event.latLng);
    infowindow.setOptions({
      pixelOffset: new google.maps.Size(0, -42)
    }); // move the infowindow up 42 pixels to the top of the default marker icon
    infowindow.open(ufomap);
  });
}
var geoJson = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "properties": {
        "Location": "Greensburg, PA",
        "Date-Time": "1969-01-01T10:00:00",
        "Shape": "Circle",
        "Details": "Possible contact with Visitor as a child When I was 2 to 4 years old",
        "Latitude": "40.33569572",
        "Longitude": "-79.55026848"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-79.550268,
          40.335696
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "Location": "Smithtown, PA",
        "Date-Time": "1979-01-01T10:00:00",
        "Shape": "Square",
        "Details": "Bright lights flashing",
        "Latitude": "44.33569572",
        "Longitude": "-78.55026848"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-78.550268,
          44.335696
        ]
      }
    }
  ]
}

#mymap {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="mymap"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

【讨论】：