Question

我试图在用户点击标记时显示存储在Google地图上的本地GeoJSON文件中的信息。然后应该显示信息，作为信息窗口。我正在使用下面的代码来显示硬编码到html正文中的标记和文本本身。我如何解析JSON文件以显示其中的内容，动态显示？

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>Info windows</title>
    <style type="text/css">/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
</head>
<body>
<div id="map"></div>
<script>

      // This example displays a marker at the center of Australia.
      // When the user clicks the marker, an info window opens.

      function initMap() {
        var hc = {lat: 40.4512, lng: -85.3700};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: hc
        });

        var contentString = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">Hartford City</h1>'+
            '<div id="bodyContent">'+
            '<p><b>Display Weather Data Here!</p>'+
            '</div>'+
            '</div>';

        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });

        var marker = new google.maps.Marker({
          position: hc,
          map: map,
          title: 'Hartford City'
        });
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
      }
    </script><script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCz672JUYjod6zzfxnBg_rzBNsBfbbjpJc&callback=initMap">
    </script></body>
</html>

谢谢！

Answer 1

Here is a JSBin有一个简单的解决方案。假设您的标记有以下GeoJSON：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "info-window-header": "Hartford City",
        "info-window-content": "Display Weather Data Here!"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -85.37029266357422,
          40.45138852013111
        ]
      }
    }
  ]
}

在JavaScript源代码中，您将检索JSON。在示例解决方案中，通过以下方式模拟：

var rawData = '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"info-window-header":"Hartford City","info-window-content":"Display Weather Data Here!"},"geometry":{"type":"Point","coordinates":[-85.37029266357422,40.45138852013111]}}]}';

然后你将解析JSON：

var data = JSON.parse(rawData);

之后，您可以从数据中访问必要的值并将它们连接到信息窗口内容字符串：

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">' + data.features[0].properties['info-window-header'] + '</h1>'+
    '<div id="bodyContent">'+
    '<p><b>'+ data.features[0].properties['info-window-content'] + '</p>'+
    '</div>'+
    '</div>';

在Google Map上的信息窗口中显示JSON文件的内容

1 个答案: