如何访问放置在谷歌地图上的geoJSON数据中的数据对象

How can I access dataobjects in geoJSON data, placed on Google Maps

本文关键字：数据 谷歌地图 对象 geoJSON 何访问 访问      更新时间：2023-09-26

我做了什么：我正在使用Google Maps Javascript API。我的地理数据存储在地理 JSON 文件中。我已使用数据图层将数据放置在地图上。我做了一个点击事件来显示弹出窗口。

我想要什么：我只想在"类别"属性中具有值"学校"的标记上显示一个圆圈。

我的地理 JSON 看起来像这样：

{
  "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>

问题：如何做到这一点？

一种选择是在数据层的"addfeature"事件上使用侦听器。请注意，javascript 区分大小写，因此"school"与"School"不同。

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

概念验证小提琴

代码片段：

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>

相关文章：