javascript - 谷歌地图 Geojson 信息窗口

Question

我正在尝试建立一个网站，显示欧洲过去 200 年的某些 meteor 撞击事件。我记下了标记，但我很难弄清楚如何让它们弹出一个信息窗口，其中包含附加的其他信息(质量、ID、位置等)有人可以帮我吗？

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

  map.data.loadGeoJson(
      'Meteorite.geojson');
  }
  function information(results) {
  map.data.addGeoJson(results);
  map.data.addListener('click', function(e) {
    infowindow.setPosition(e.latLng);
    infowindow.setContent(e.feature.getProperty("id"));
    infowindow.open(map);
  });
}

Answer 1

这是一个使用 map.data.addGeoJson 的示例(从局部变量加载 geojson)，但与 map.data.loadGeoJson 相同。单击功能信息窗口会显示关联的属性:

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

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 8,
    center: {lat: 45.062, lng: 7.67},
    mapTypeId: 'terrain'
  });

  // Load GeoJSON.
  map.data.addGeoJson({
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "geometry": {
          "title": "Mount Viso",
          "type": "Point",
          "coordinates": [7.090301513671875,44.66743203082226]
        },
        "properties": {
          "name": "Mount Viso",
          "description": "the highest mountain of the Cottian Alps",
          "link": "https://en.wikipedia.org/wiki/Monte_Viso"
        }
      }, {
        "type": "Feature",
        "geometry": {
       	  "title": "Gran Paradiso",
          "type": "Point",
          "coordinates": [7.266082763671875,45.51837616409498]
        },
        "properties": {
          "name": "Gran Paradiso",
          "description": "a mountain in the Graian Alps in Italy",
          "link": "https://en.wikipedia.org/wiki/Gran_Paradiso"
        }
      }]
    });
    
    map.data.addListener('click', function(event) {
     var feat = event.feature;
     var html = "<b>"+feat.getProperty('name')+"</b><br>"+feat.getProperty('description');
     html += "<br><a class='normal_link' target='_blank' href='"+feat.getProperty('link')+"'>link</a>";
     infowindow.setContent(html);
     infowindow.setPosition(event.latLng);
     infowindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
     infowindow.open(map);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

html, body, #map-canvas {
    height: 100%;
    margin: 0;
    padding: 0;
}

<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js"></script>