Question

我正在努力建立一个网站，它在过去的200年里在欧洲展示了某些流星罢工。我把标记放下了但是我很难弄清楚如何让它们弹出一个信息窗口，附上其他信息（质量，身份，位置等）可以帮助我吗？< / p>

  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完全相同。点击某个功能后，infoWindow会显示相关的属性：

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>

谷歌地图Geojson infowindow

1 个答案: