Google maps API v3.40 Data.StyleOptions 接口 --> Shape答案

【问题标题】：Google maps API v3.40 Data.StyleOptions interface --> ShapeGoogle maps API v3.40 Data.StyleOptions 接口 --> Shape
【发布时间】：2020-07-06 09:50:03
【问题描述】：

我正在尝试围绕标记画一个圆圈以确定边界或区域范围。我只需要一个圆，不需要多边形，有一个点和半径就足以绘制它。我想要的正是这个：

我正在以这种方式使用函数addGeoJson 加载地图数据（为了以防万一，我在问题末尾附上了服务器响应的示例）：

var promise = $.getJSON("http://localhost:8000/api/v1/targets/");
promise.then(function(data){
    map.data.addGeoJson(data,{idPropertyName:"id"});
});

结果，我得到了这张地图，每个点都有一个标记：

由于我没有手动迭代数据的每个标记，因此我想以通用方式设置它们的样式。在 google API 参考中寻找一种更改标记样式的方法，我发现 DatasStyleOptions 允许我通过 shape 属性定义标记的形状，该属性是 MarkerShape。所以，我最终尝试了这个解决方案：

 map.data.setStyle(function(feature) {
        var geo = feature.getGeometry();
        //when it's a point
        if(geo.getType().toLowerCase()==='point'){  
         return {
             shape: {type: 'circle', coords: [geo.get().lat(), geo.get().lng(), parseFloat(feature.getProperty("radius"))]}
         };
        }
    });

Shape 对象如下所示： {"type":"circle","coords":[30,30, 5000]}

上面的代码没有做任何改变，结果还是一样，地图上只显示了标记。我找到了解决方法，但从我的角度来看，这不是解决问题的最佳方法，我不明白为什么前面描述的解决方案不起作用。这是我目前的解决方案：

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: parseFloat(feature.getProperty("radius")),
                                            fillColor: '#f00',
                                            fillOpacity: 0.5,
                                            strokeWeight: 0});
        return {
            visible:true,
        };
    }
});

GeoJSON 示例：

{
    "type": "FeatureCollection",
    "features": [
        {
            "id": 1,
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -101.25,
                    30.751277
                ]
            },
            "properties": {
                "user": 2,
                "title": "play station",
                "radius": "4500.00"
            }
        },
        {
            "id": 2,
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -101.25,
                    50.751277
                ]
            },
            "properties": {
                "user": 2,
                "title": "Xbox 360",
                "radius": "6969.00"
            }
        },
        {
            "id": 3,
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -56.1,
                    -34.9011
                ]
            },
            "properties": {
                "user": 2,
                "title": "Nintendo",
                "radius": "5000.00"
            }
        }
    ]
}

【问题讨论】：

您到底想达到什么目标，什么行不通？请提供minimal reproducible example 允许重现问题，包括完整的 GeoJSON 文件示例和清晰的问题描述。
“不起作用”是什么意思？在我看来，您的 GeoJSON 中的经度和纬度是相反的：[30.751277,-101.25,45]（应该是经度，纬度；纬度可以'不小于-90 ...）
GeoJSON 中没有 "type":"circle"。您的“解决方法”可能是实现所需结果的最佳方法（另一种选择是计算等效圆形多边形并将其添加到 GeoJSON）
或者在setStyle函数可以返回的Data.StyleOptions对象中。 shape 属性是标记图标的图像映射。（根据文档：“定义用于命中检测的图像映射。”）
MarkerShape 这个对象定义了一个标记图像的可点击区域。这是你想要达到的目标吗？据我了解您的问题，您只是想显示一个标记和一个圆圈，所以我不明白您为什么需要 MarkerShape，除非您希望整个圆圈都可以点击？

标签： javascript google-maps google-maps-api-3

【解决方案1】：

我正在尝试围绕标记画一个圆圈以确定边界或区域范围。

您可以将数据添加到地图中，然后迭代您的数据并为每个Point 添加一个Circle 到地图中（如果存在radius 属性）。我就是这样做的。

function initialize() {

  var myLatLng = new google.maps.LatLng(-34.9011, -56.1);
  var mapOptions = {
    zoom: 11,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

  var fc = {
    "type": "FeatureCollection",
    "features": [{
        "id": 1,
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [
            -101.25,
            30.751277
          ]
        },
        "properties": {
          "user": 2,
          "title": "play station",
          "radius": "4500.00"
        }
      },
      {
        "id": 2,
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [
            -101.25,
            50.751277
          ]
        },
        "properties": {
          "user": 2,
          "title": "Xbox 360",
          "radius": "6969.00"
        }
      },
      {
        "id": 3,
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [
            -56.1,
            -34.9011
          ]
        },
        "properties": {
          "user": 2,
          "title": "Nintendo",
          "radius": "5000.00"
        }
      }
    ]
  };

  map.data.addGeoJson(fc);

  map.data.forEach(function(feature) {

    if (feature.getGeometry().getType() === 'Point') {

      var radius = parseFloat(feature.getProperty('radius'));

      if (radius) {

        new google.maps.Circle({
          map: map,
          center: feature.getGeometry().get(),
          radius: radius,
          fillColor: '#f00',
          fillOpacity: 0.5,
          strokeWeight: 0,
        });
      }
    }
  });
}

#map {
  height: 180px;
}

<div id="map"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize" async defer></script>

JSFiddle demo

【讨论】：