Erstellen von Infowindows über Funktionen geladen über loadGeoJson()

Question

Ich entschuldige mich, wenn dies grundlegend ist, aber ich habe sehr begrenzte Javascript-Kenntnisse.

Ich mache eine Karte, die GeoJSON-Daten, die ich in ArcGIS erstellt habe, in GeoJSON mit ogr2ogr formatiert. Ich habe die Karte geladen und zeige die Punktmarkierungen aus meiner GeoJSON-Datei, und ich habe sogar eine styleFeature()-Funktion, um das Styling auf die Features basierend auf ihren Eigenschaften einzustellen.

Das Problem, das ich habe, versucht Infowindows Pop-ups zu haben, wenn ein Punkt-Feature angeklickt wird.

Ich habe erfolgreich verwendet den Code ein Ereignis-Listener zu setzen und den Inhalt eines div mit den Informationen aus einer geklickt Funktion aktualisieren:

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; 
}); 

Was hast Ich mag würde, anstatt zu tun haben ein Ereignis, das Infofenster wie diese startet, die nicht funktioniert:

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}); 
}); 

Mein Datensatz besteht aus über tausend Punkte so hart Codierung der Infofenster nicht funktioniert, und ich habe keine Beispiele gesehen, die zeigen, wie man ein Array von Infofenstern erstellt, während die Features in der Funktion von setStyle() entweder aufgerufen.

Ich weiß, dass dies mit meinem mangelnden Verständnis von Umfang, Ereignissen und Objektarrays zu tun hat, aber ich stoße nur auf eine Wand.

Jede Hilfe wäre willkommen.

Answer 1

Um das Infofenster auf einen Klick anzuzeigen, müssen Sie open() aufrufen.

// 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); 
    }); 

working fiddle

Code-Schnipsel:

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>