Question

我正在使用Maps API v3并添加了一个GeoJSON文件，以便在GeoJSON文件中的每个条目周围创建一个圆圈（基于google.maps.Symbol对象） - 使用 setStyle可以很好地工作 -Functionality：

map.data.addGeoJson('url_to_GeoJSON');
..
map.data.setStyle(function(feature) {
return /** @type {google.maps.Data.StyleOptions} */({
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 5,
    fillColor: '#f00',
    fillOpacity: 0.5,
    strokeWeight: 0
  }
  });
});

现在我需要在每个点周围绘制一个静态半径（以米为单位）的圆圈，就像常规 google.maps.CircleOptions 提供的＆＃39; 半径一样＆＃39;

是否有可能使用非常舒适的数据层＆＃39; addGeoJson ＆＃39; - ＆＃39; setStyle ＆＃39; -features结合每个点周围的地理上正确的半径（米）？

我很乐意避免手动设置每个标记＆＃34;旧方式＆＃34;通过使用

遍历整个GeoJSON文件

   new google.maps.Circle({radius: 20000});

非常感谢任何帮助！提前谢谢！

添加Dr. Molle的代码后，使用多个google.maps.Data-Objects时似乎存在问题，应通过选中/取消选中网站内的复选框来显示/隐藏。这是我的实际代码，它已经显示了带有绘制圆圈的数据图层，但在取消选中复选框时不会隐藏特定数据图层的圆圈：

var map;
var dataset1 = new google.maps.Data();
var dataset2 = new google.maps.Data();
var dataset3 = new google.maps.Data();

function initialize() {
   // Create a new map.
   map = new google.maps.Map(document.getElementById('map-canvas'), {
   zoom: 6,
   center: {lat: 50.678240, lng: 9.437256},
   mapTypeId: google.maps.MapTypeId.TERRAIN
   });

   checkDataset();
}

function checkDataset() {
   if (document.getElementById('chkDataset1').checked) {

   // Define styles for dataPlug9 and apply to map-object.
   dataset1.setStyle(function(feature) {
      var geo = feature.getGeometry();

   // Check for a point feature.
   if(geo.getType().toLowerCase()==='point'){
      //create a circle
      feature.circle = new google.maps.Circle({
      map: map,
      center: geo.get(),
      radius: 200000,
      fillColor: '#FF0000',
      fillOpacity: 0.05,
      strokeColor: '#FF0000',
      strokeOpacity: 0.4,
      strokeWeight: 1              
   });

   //trigger the dblclick-event of map.data on a dblclick on the circle
   google.maps.event.addListener(feature.circle, 'dblclick',function(e){
      e.stop();
      google.maps.event.trigger(this.getMap().data,'dblclick',   {feature:feature})
     });  

   // Hide the marker-icon.
   return {visible:false}; 
   }}); 

   // Remove feature on dblclick.
   google.maps.event.addListener(dataset1,'dblclick',function(f){
   this.remove(f.feature);
   });

   // Remove circle too when feature will be removed.
   google.maps.event.addListener(dataset1,'removefeature',function(f){
   try{f.feature.circle.setMap(null);}catch(e){}
   });

   dataset1.loadGeoJson('data/plug1.json');
   dataset1.setMap(map);
   } else {
      dataset1.removefeature();
      // This doesn't work either ..
      dataset1.setMap(null);
   }
}

我还为其他2个数据集（dataset2和dataset3）添加了函数checkDataset（）的上述例程，并更改了“数据集1”和“数据集1”。到＆＃39; dataset2 / dataset3＆＃39;。

Answer 1

您不需要“手动”迭代，setStyle已经迭代了这些功能。

您可以使用它来执行其他代码（例如，创建google.maps.Circle）：

        map.data.setStyle(function(feature) {  
        var geo=   feature.getGeometry();
        //when it's a point
        if(geo.getType().toLowerCase()==='point'){
         //create a circle
         feature.circle=new google.maps.Circle({map:map,
                                                center: geo.get(),
                                                radius: 20000,
                                                fillColor: '#f00',
                                                fillOpacity: 0.5,
                                                strokeWeight: 0});
         //and hide the marker when you want to
         return {visible:false}; 
        }});

编辑：

与评论有关：

圈子将保存为要素的circle - 属性（注意：此属性不是geoJSON含义的属性，因此可能无法通过getProperty访问）。< / p>

您可以为removefeature - 事件添加一个监听器并删除其中的圆圈，以便在删除该功能时删除该圆圈。

将删除dblclick上的功能（包括圆圈）的示例代码：

   map.data.setStyle(function(feature) {  
        var geo=   feature.getGeometry();
        //when it's a point
        if(geo.getType().toLowerCase()==='point'){
         //create a circle
         feature.circle=new google.maps.Circle({map:map,
                                                center:geo.get(),
                                                radius:200000,
                                                fillColor: '#f00',
                                                fillOpacity: 0.5,
                                            strokeWeight: 0});

         //trigger the dblclick-event of map.data on a dblclick on the circle
         google.maps.event.addListener(feature.circle, 'dblclick',function(e){
           e.stop();
           google.maps.event.trigger(this.getMap().data,'dblclick',{feature:feature})
         });      

         //and hide the marker
         return {visible:false}; 
   }});



   //remove the feature on dblclick
   google.maps.event.addListener(map.data,'dblclick',function(f){
     this.remove(f.feature);
   });

   //remove the circle too when the feature will be removed
   google.maps.event.addListener(map.data,'removefeature',function(f){
     try{f.feature.circle.setMap(null);}catch(e){}
   });

使用基于GeoJSON的Maps API v3数据层绘制半径（以米为单位）

1 个答案:

编辑：