Creazione di infowindows su funzionalità caricate tramite loadGeoJson()

Question

Mi scuso se questo è di base, ma ho una conoscenza javascript molto limitata.

Sto creando una mappa che carica i dati GeoJSON che ho creato in ArcGIS riformattato su GeoJSON utilizzando ogr2ogr. Ho caricato la mappa e mostrato i punti del mio file GeoJSON, e ho anche ottenuto una funzione styleFeature() per impostare lo stile sulle funzionalità in base alle loro proprietà.

Il problema che sto riscontrando sta provando a far apparire le infowindows quando si fa clic su una funzione punto.

Ho usato con successo il codice per impostare un listener di eventi e aggiornare i contenuti di un div con le informazioni da una caratteristica cliccato:

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

Cos'hai mi piacerebbe fare, invece è di avere un evento che lancia un infowindow come questo, che non funziona:

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

mio set di dati è costituito da oltre un migliaio di punti in modo hard-codifica i infowindows non funziona, e non ho visto alcun esempio che mostrano come creare un array di infowindows mentre le funzionalità sono collegate in funzione chiamata da setStyle() entrambi.

So che questo ha a che fare con la mia mancanza di comprensione dell'ambito, degli eventi e degli array di oggetti, ma sto solo colpendo un muro.

Qualsiasi aiuto sarebbe apprezzato.

Answer 1

Per visualizzare la finestra di apertura con un clic, è necessario chiamare 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); 
    }); 

working fiddle

frammento di codice:

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>