API карт Google v3.40 Интерфейс Data.StyleOptions -> Shape

Question

Я пытаюсь нарисовать круг вокруг маркера, чтобы определить границу или диапазон области. Мне нужен просто круг, нет необходимости в многоугольнике, с точкой и радиусом его должно быть достаточно, чтобы нарисовать его. То, что я хочу именно это:

Я загружаю данные карты с помощью функции addGeoJson таким образом (я приложил пример ответ сервера в конце вопроса на всякий случай):

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

В результате я получаю эту карту, где есть отметка для каждой точки:

Поскольку я не перебираю вручную каждый маркер своих данных, я хотел бы оформить их в общем виде c. Ища способ изменить стиль маркера в справочнике API Google, я обнаружил, что 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"
            }
        }
    ]
}

Answer 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