Блог

Я попытался создать геозону в Google Maps JavaScript API, и теперь я хочу получить GeoJSON забора.

Я попробовал следующее:

 polygon.getMap().data.toGeoJson((data)=>{
  console.log(data);
});

polygon.map.data.toGeoJson((data)=>{
  console.log(data);
});
  

… но он возвращает только пустые объекты FeatureCollection.

Это мой скрипт:

 "use strict";
      let fence, map;
      function initMap() {
        const zerobstacle = {lat: 9.7934792, lng: 118.7300364};
        map = new google.maps.Map(document.getElementById("map"), {
          zoom: 11,
          center: {
            lat: zerobstacle.lat,
            lng: zerobstacle.lng
          },
          mapTypeId: "terrain"
        });

        // Define the LatLng coordinates for the polygon's path.

        const fence_coords = [
          {
            lat: (zerobstacle.lat 1*0.01),
            lng: (zerobstacle.lng-10*0.01)
          },
          {
            lat: (zerobstacle.lat-6*0.01),
            lng: (zerobstacle.lng 4*0.01)
          },
          {
            lat: (zerobstacle.lat 8*0.01),
            lng: (zerobstacle.lng 6*0.01)
          },
          {
            lat: (zerobstacle.lat 1*0.01),
            lng: (zerobstacle.lng-10*0.01)
          }
        ];

        // Construct the polygon.
        fence = new google.maps.Polygon({
          paths: fence_coords,
          strokeColor: "##FFF71D",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#FFF71D",
          fillOpacity: 0.35,
          editable: true,
        });
        fence.setMap(map);
      }
  

Спасибо!

Data.toGeoJson возвращает GeoJSON из объектов, которые были добавлены в слой данных. Если вы хотите, чтобы ваш полигон в этом результате, вам нужно добавить его в dataLayer, в настоящее время вы добавляете его на карту.

Чтобы добавить полигон к слою данных, смотрите Пример в документации

Для вашего полигона это было бы:

   map.data.add({
    geometry: new google.maps.Data.Polygon([fence_coords])
  });
  

Чтобы экспортировать его, используйте .toGeoJson:

toGeoJson (обратный вызов)
Параметры:
обратный вызов: функция (объект)
Возвращает значение: Нет
Экспортирует объекты из коллекции в объект GeoJSON.

Обратите внимание, что .toGeoJson не имеет возвращаемого значения, требуется обратный вызов. Для регистрации выходных данных GeoJSON:

   map.data.toGeoJson(function(geoJson){
    console.log(geoJson);
  });
  

доказательство концепции скрипки

журналы:

 {"type":"FeatureCollection",
 "features":[
  {"type":"Feature",
   "geometry":{
     "type":"Polygon",
     "coordinates":[[
       [118.63003640000001,9.8034792],
       [118.77003640000001,9.7334792],
       [118.7900364,9.8734792],
       [118.63003640000001,9.8034792],
       [118.63003640000001,9.8034792]
     ]]},
   "properties":{}
  }
 ]
}
  

фрагмент кода:

 "use strict";
let fence, map;

function initMap() {
  const zerobstacle = {
    lat: 9.7934792,
    lng: 118.7300364
  };
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: {
      lat: zerobstacle.lat,
      lng: zerobstacle.lng
    },
    mapTypeId: "terrain"
  });

  // Define the LatLng coordinates for the polygon's path.

  const fence_coords = [{
      lat: (zerobstacle.lat   1 * 0.01),
      lng: (zerobstacle.lng - 10 * 0.01)
    },
    {
      lat: (zerobstacle.lat - 6 * 0.01),
      lng: (zerobstacle.lng   4 * 0.01)
    },
    {
      lat: (zerobstacle.lat   8 * 0.01),
      lng: (zerobstacle.lng   6 * 0.01)
    },
    {
      lat: (zerobstacle.lat   1 * 0.01),
      lng: (zerobstacle.lng - 10 * 0.01)
    }
  ];
  console.log(fence_coords);
  map.data.add({
    geometry: new google.maps.Data.Polygon([fence_coords])
  });
  map.data.toGeoJson(function(geoJson) {
    console.log(JSON.stringify(geoJson));
    document.getElementById('geojson').innerHTML = JSON.stringify(geoJson);
  });
}  

 /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}  

 <!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qkamp;callback=initMapamp;libraries=amp;v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

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

</html>