javascript – 通过loadGeoJson()加载的功能上创建Infowindows

// 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

代码段：

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,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,"properties": {
        "letter": "o","color": "red","rank": "15","ascii": "111","Description": "the first letter o"          
      },"coordinates": [128.84,-25.76]
      }
    },{
      "id":2,"color": "yellow","Description": "the second letter o"
      },"coordinates": [131.87,{
      "id":3,"properties": {
        "letter": "g","ascii": "103","Description": "the letter g"
      },"coordinates": [138.12,-25.04]
      }
    },{
      "id":4,"properties": {
        "letter": "l","color": "green","rank": "12","ascii": "108","Description": "the letter l"
      },"coordinates": [140.14,-21.04]
      }
    },{
      "id":5,"properties": {
        "letter": "e","rank": "5","ascii": "101","Description": "the letter e"
      },"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>