[英]How can I access dataobjects in geoJSON data, placed on Google Maps
What I've done: I'm working with the Google Maps Javascript API.我所做的:我正在使用 Google Maps Javascript API。 My geodata is stored in a geoJSON file.
我的地理数据存储在 geoJSON 文件中。 I've placed the data on the map using a data layer.
我已经使用数据层将数据放置在地图上。 I've made a clickEvent for showing popUpWindows.
我制作了一个 clickEvent 来显示 popUpWindows。
What I want: I want to show a circle only on markers that have the value 'school' in the 'category' property.我想要什么:我只想在“类别”属性中具有“学校”值的标记上显示一个圆圈。
My geoJSON looks like this:我的 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]
}
}
]
}
My javascript look like this:我的 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>
The Question : How can accomplish this?问题:如何做到这一点?
One option is to use a listener on the "addfeature" event of the DataLayer.一种选择是在 DataLayer 的“addfeature”事件上使用侦听器。 Note that javascript is case sensitive so "school" is not the same as "School".
请注意,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概念证明小提琴
code snippet:代码片段:
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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.