Создание Infowindows для функций, загруженных с помощью loadGeoJson()

Извиняюсь, если это базовое, но у меня очень ограниченное знание javascript.

Я делаю карту, которая загружает данные GeoJSON, которые я создал в ArcGIS, переформатированном в GeoJSON, используя ogr2ogr. У меня загружена карта и показаны маркеры точек из моего файла GeoJSON, и у меня даже есть функция styleFeature(), чтобы установить стиль элементов на основе их свойств.

Проблема, с которой я столкнулась, заключается в том, чтобы всплывать всплывающие окна, когда нажимается точка.

Я успешно использовал код для установки прослушивателя событий и обновил содержимое div с информацией с помощью функции щелчка:

map.data.loadGeoJson('http://www.myurl.com/file.json');

map.data.setStyle(styleFeature);

map.data.addListener('click', function(event) {
    var myHTML = event.feature.getProperty('Description');
    document.getElementById('info-box').innerHTML = myHTML;
});

Что бы я хотел сделать, это событие, которое запускает такой инфо-окно, которое не работает:

map.data.loadGeoJson('http://www.myurl.com/file.json');

map.data.setStyle(styleFeature);

map.data.addListener('click', function(event) {
    var myHTML = event.feature.getProperty('Description');
    var infowindow = new google.maps.InfoWindow({content: myHTML});
});

Мой набор данных состоит из более тысячи точек, поэтому жесткое кодирование infowindows не работает, и я не видел каких-либо примеров, показывающих, как создать массив инфоокен, поскольку функции зацикливаются в функции, вызванной setStyle().

Я знаю, что это связано с моим недостатком понимания области, событий и массивов объектов, но я просто нажимаю на стену.

Любая помощь будет оценена.

ОТВЕТЫ

Ответ 1

Чтобы получить информационное окно для отображения по клику, вам нужно вызвать open().

  // global infowindow
  var infowindow = new google.maps.InfoWindow();

  // When the user clicks, open an infowindow
  map.data.addListener('click', function(event) {
      var myHTML = event.feature.getProperty("Description");
      infowindow.setContent("<div style='width:150px; text-align: center;'>"+myHTML+"</div>");
      infowindow.setPosition(event.feature.getGeometry().get());
      infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
      infowindow.open(map);
  });

рабочая скрипка

фрагмент кода:

var infowindow = new google.maps.InfoWindow();
function gotoFeature(featureNum) {
    var feature = map.data.getFeatureById(features[featureNum].getId());
    if (!!feature) google.maps.event.trigger(feature, 'changeto', {feature: feature});
    else alert('feature not found!');
}

function initialize() {
  // Create a simple map.
  features=[];
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 4,
    center: {lat: -28, lng: 137.883}
  });
    google.maps.event.addListener(map,'click',function() {
        infowindow.close();
    });
    map.data.setStyle({fillOpacity:.8});
  // Load a GeoJSON from the same server as our demo.
  var featureId = 0;
  google.maps.event.addListener(map.data,'addfeature',function(e){
      if(e.feature.getGeometry().getType()==='Polygon'){
          features.push(e.feature);
          var bounds=new google.maps.LatLngBounds();
          
          e.feature.getGeometry().getArray().forEach(function(path){
          
             path.getArray().forEach(function(latLng){bounds.extend(latLng);})
          
          });
          e.feature.setProperty('bounds',bounds);
          e.feature.setProperty('featureNum',features.length-1);
          
          
        
        }
  });
  // When the user clicks, open an infowindow
  map.data.addListener('click', function(event) {
          var myHTML = event.feature.getProperty("Description");
      infowindow.setContent("<div style='width:150px; text-align: center;'>"+myHTML+"</div>");
          infowindow.setPosition(event.feature.getGeometry().get());
      infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
          infowindow.open(map);
  });    
   map.data.addGeoJson(googleJSON);
  
  
}

google.maps.event.addDomListener(window, 'load', initialize);
var googleJSON = {
  "type": "FeatureCollection",
  "features": [
    {
      "id":0,
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71",
        "Description": "the letter G"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [123.61, -22.14]
         
      }
    },
    {
      "id":1,
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111",
        "Description": "the first letter o"          
      },
      "geometry": {
        "type": "Point",
        "coordinates": [128.84, -25.76]
      }
    },
    {
      "id":2,
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111",
        "Description": "the second letter o"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [131.87, -25.76]
      }
    },
    {
      "id":3,
      "type": "Feature",
      "properties": {
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103",
        "Description": "the letter g"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [138.12, -25.04]
      }
    },
    {
      "id":4,
      "type": "Feature",
      "properties": {
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108",
        "Description": "the letter l"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [140.14,-21.04]
      }
    },
    {
      "id":5,
      "type": "Feature",
      "properties": {
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101",
        "Description": "the letter e"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [144.14, -27.41]
      }
    }
  ]
};
html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?ext=.js"></script>
<div id="map-canvas"></div>