如何訪問放置在Google地圖上的geoJSON數據中的數據對象

我所做的： 我正在使用Google Maps JavaScript API。我的地理數據存儲在geoJSON文件中。我使用數據層將數據放置在地圖上。我做了一個clickEvent來顯示popUpWindows。如何訪問放置在Google地圖上的geoJSON數據中的數據對象

我想要什麼： 我想只顯示'category'屬性中具有'school'值的標記的圓。

我GeoJSON的是這樣的：

{ 
    "type": "FeatureCollection", 
    "features": [ 
     { 
      "type": "Feature", 
      "properties": { 
       "category": "School", 
       "name":"De Hooge Waai", 
       "popupContent": "Basisschool De Hooge Waai in Raamsdonk", 
       "icon": "http://maps.google.com/mapfiles/kml/paddle/S.png" 
      }, 
      "geometry": { 
       "type": "Point", 
       "coordinates": [4.905370,51.686385] 
      } 
     }, 
     { 
      "type": "Feature", 
      "properties": { 
       "category": "Museum", 
       "name":"Landgoed Het Broeck", 
       "popupContent": "Landgoed 'Het Broeck heeft rijtuigmuseum", 
       "icon": "http://maps.google.com/mapfiles/kml/paddle/M.png" 
      }, 
      "geometry": { 
       "type": "Point", 
       "coordinates": [4.900267,51.686103] 
      } 
     } 
    ] 
}

我的JavaScript看起來像這樣：

<script> 
    function initMap() { 

     //---------- 
     // Map 
     //---------- 
     var mapOptions = { 
      zoom: 15, 
      center:{lat: 51.687762, lng: 4.909900} 
     }; 

     var map = new google.maps.Map(document.getElementById("map"),mapOptions); 

     //----------- 
     // Assets: 
     //----------- 
     infowindow = new google.maps.InfoWindow({ 
      content: "" 
     }); 
     var regionCircle = new google.maps.Circle({ 
      strokeColor: '#FF0000', 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: '#FF0000', 
      fillOpacity: 0.35, 
      radius: 500 
     }); 


     // JSON: 
     map.data.loadGeoJson('test.json'); 


     // ICON: 
     map.data.setStyle(function(feature) { 
      return ({ 
       icon:{ 
        url:feature.getProperty('icon'), 
        scaledSize: new google.maps.Size(32, 32) 
       } 
      }); 
     }); 

     //--------------- 
     // Events: 
     //--------------- 
     map.data.addListener('click', function(event) { 
      var myHTML = "<h1>"+event.feature.getProperty("category")+ 
         "</h1><h2>"+event.feature.getProperty("name")+"</h2>" + 
         event.feature.getProperty("popupContent"); 
      infowindow.setContent(myHTML); 
      infowindow.setPosition(event.feature.getGeometry().get()); 
      infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)}); 
      infowindow.open(map); 


     }); 
     google.maps.event.addListener(map,'click',function() { 
      infowindow.close(); 
     }); 
    } 
    </script>

問題：如何才能做到這一點？

來源

2016-02-12 Rob

一種選擇是在DataLayer的「addfeature」事件上使用偵聽器。請注意，JavaScript區分大小寫，所以「學校」與「學校」不一樣。

map.data.addListener('addfeature', function(evt) { 
    if (evt.feature.getProperty('category') == "School") { 
    var regionCircle = new google.maps.Circle({ 
     center: evt.feature.getGeometry().get(), 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: '#FF0000', 
     fillOpacity: 0.35, 
     radius: 500, 
     map: map 
    }); 
    } 
});

proof of concept fiddle

代碼片段：

function initMap() { 
 

 
    //---------- 
 
    // Map 
 
    //---------- 
 
    var mapOptions = { 
 
    zoom: 14, 
 
    center: { 
 
     lat: 51.687762, 
 
     lng: 4.909900 
 
    } 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 

 
    //----------- 
 
    // Assets: 
 
    //----------- 
 
    infowindow = new google.maps.InfoWindow({ 
 
    content: "" 
 
    }); 
 
    var regionCircle = new google.maps.Circle({ 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 0.8, 
 
    strokeWeight: 2, 
 
    fillColor: '#FF0000', 
 
    fillOpacity: 0.35, 
 
    radius: 500 
 
    }); 
 

 

 
    map.data.addListener('addfeature', function(evt) { 
 
    if (evt.feature.getProperty('category') == "School") { 
 
     var regionCircle = new google.maps.Circle({ 
 
     center: evt.feature.getGeometry().get(), 
 
     strokeColor: '#FF0000', 
 
     strokeOpacity: 0.8, 
 
     strokeWeight: 2, 
 
     fillColor: '#FF0000', 
 
     fillOpacity: 0.35, 
 
     radius: 500, 
 
     map: map 
 
     }); 
 
    } 
 
    }); 
 

 
    // JSON: 
 
    map.data.addGeoJson(geoJson); 
 
    // ICON: 
 
    map.data.setStyle(function(feature) { 
 
    return ({ 
 
     icon: { 
 
     url: feature.getProperty('icon'), 
 
     scaledSize: new google.maps.Size(32, 32) 
 
     } 
 
    }); 
 
    }); 
 

 
    //--------------- 
 
    // Events: 
 
    //--------------- 
 
    map.data.addListener('click', function(event) { 
 
    var myHTML = "<h1>" + event.feature.getProperty("category") + 
 
     "</h1><h2>" + event.feature.getProperty("name") + "</h2>" + 
 
     event.feature.getProperty("popupContent"); 
 
    infowindow.setContent(myHTML); 
 
    infowindow.setPosition(event.feature.getGeometry().get()); 
 
    infowindow.setOptions({ 
 
     pixelOffset: new google.maps.Size(0, -30) 
 
    }); 
 
    infowindow.open(map); 
 

 

 
    }); 
 
    google.maps.event.addListener(map, 'click', function() { 
 
    infowindow.close(); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap); 
 
var geoJson = { 
 
    "type": "FeatureCollection", 
 
    "features": [{ 
 
    "type": "Feature", 
 
    "properties": { 
 
     "category": "School", 
 
     "name": "De Hooge Waai", 
 
     "popupContent": "Basisschool De Hooge Waai in Raamsdonk", 
 
     "icon": "http://maps.google.com/mapfiles/kml/paddle/S.png" 
 
    }, 
 
    "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [4.905370, 51.686385] 
 
    } 
 
    }, { 
 
    "type": "Feature", 
 
    "properties": { 
 
     "category": "Museum", 
 
     "name": "Landgoed Het Broeck", 
 
     "popupContent": "Landgoed 'Het Broeck heeft rijtuigmuseum", 
 
     "icon": "http://maps.google.com/mapfiles/kml/paddle/M.png" 
 
    }, 
 
    "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [4.900267, 51.686103] 
 
    } 
 
    }] 
 
};

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>

來源

2016-02-12 16:38:14 geocodezip

完美！謝謝。 – Rob

如果這回答了你的問題，請[接受它]（http://meta.stackoverflow.com/questions/5234/how-does-accepting-an-answer-work）它。 – geocodezip

如何訪問放置在Google地圖上的geoJSON數據中的數據對象

回答

相關問題