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

我正在使用Maps API v3，并添加了一个GeoJSON文件，以在GeoJSON文件中的每个条目周围创建一个圆圈（基于google.Maps.Symbol对象）——通过使用setStyle功能，这一点非常好：

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提供的“半径”一样

是否有可能将非常舒适的数据层“addGeoJson”和“setStyle”功能与地理位置正确的半径（以米为单位）结合使用

我很乐意避免使用“旧方法”手动设置每个标记，方法是使用

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

我还为其他两个数据集（dataset2和dataset3）添加了上述函数checkDataset（）例程，并将“dataset1”更改为“dataset2/dataset3”。

您不需要“手动”迭代，

setStyle

已经迭代了这些特性

您可以使用它执行其他代码（例如创建

google.maps.Circle

）：

---

编辑： 有关评论：

圆圈将保存为功能的

圆圈

-属性（注意：此属性不是geoJSON意义上的属性，因此不能通过

getProperty

访问）

您可以为

removeffeature

-事件添加一个侦听器，并删除该事件中的圆圈，因此当您删除该功能时，圆圈将被删除

将在

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

---

什么是地理上正确的半径？本应更详细地解释这一点：绘制的半径为5000米的圆圈应始终保持在地图上5000米，以显示围绕中心的范围。缩小时，圆圈将显示得更小，但始终与地图中心周围5000米的距离成比例。哇，你的代码片段工作起来很有魅力！非常感谢你！在这种情况下，是否可以删除圆圈，而无需将其保存在额外的数组中，并通过迭代将其删除？嗯，在google.maps.Data（）中使用多个geoJSON文件时，这是否可行？我想用圆圈显示这些对象，并能够单独隐藏每个数据层？我在第一个问题中包含了我的代码。我想，我的不同maps.Data-Objects可能有问题。对不起，也许我的第一篇关于它的前一个主题的帖子现在比容易理解的更令人困惑，并且对其他用户更有帮助：我是否应该开始一个关于在Data.set上添加/删除圆圈的新问题，即使在一个地图上使用多个数据层，将

数据

-实例的

地图

-属性设置为

空

也不会

从实例中删除

特征，它会从地图中删除该层，但该实例仍将包含这些特征。因此，观察

removeffeature

-事件是无用的，因为当您将数据集的

map

-属性设置为

null

时，不会删除任何功能。而是将圆的map属性绑定到数据集的map属性。

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