Добавление данных Geo JSON в API Карт Google, размещенный локально - PullRequest
Новая
       21

Добавление данных Geo JSON в API Карт Google, размещенный локально

0 голосов
/ 04 февраля 2020

Я пытаюсь вывести свои географические данные json на карту Google. Я пробовал различные методы в документации, чтобы получить очки для загрузки: https://developers.google.com/maps/documentation/javascript/reference/data#Data .toGeo Json, но пока безуспешно. В основном карта загружается нормально, но точки вообще не загружаются, поэтому я должен что-то делать не так с импортом точек. Тем более, что когда я добавляю точки, используя их интерфейс перетаскивания, кажется, что они нормально загружаются.

Код отображения: 

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Makes the sample page fill the window*/
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
      #floating-panel {
        background-color: #fff;
        border: 1px solid #999;
        left: 25%;
        padding: 5px;
        position: absolute;
        top: 10px;
        z-index: 5;
      }
    </style>
  </head>
  <body>
        <div id="floating-panel">
        <button onclick="toggleHeatmap()">Toggle Heatmap</button>
        <button onclick="changeGradient()">Change gradient</button>
        <button onclick="changeRadius()">Change radius</button>
        <button onclick="changeOpacity()">Change opacity</button>
    </div>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 39.742043, lng: -104.991531},
          zoom: 10
        });
      }
      var dataPoints = new google.maps.toGeoJson('map.json');
      google.maps.addGeoJson(dataPoints);
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=KEY_GOES_HERE&callback=initMap"
    async defer></script>
  </body>
</html>

Затем данные гео JSON:

https://api.myjson.com/bins/k45by

Это ссылка для экономии места, но я буду использовать эти данные Geo JSON в локальном файле и запускать их на локальном веб-сервере, используя python http.server.

1 Ответ

0 голосов
/ 04 февраля 2020

Используйте метод loadGeoJson для получения данных из домена или локального файла. Он будет использовать XMLHTTPRequest для извлечения ваших данных и выполнения всех шагов, чтобы подготовить ваши данные к использованию.

Каждая карта имеет объект map.data, который действует как слой данных для произвольных геопространственных данных. в том числе гео JSON. Вы можете загрузить и отобразить файл Geo JSON, вызвав метод loadGeo JSON () объекта данных. В приведенном ниже примере показано, как добавить карту и загрузить внешние данные Geo JSON. 

<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 39.742043, lng: -104.991531},
      zoom: 10
    });
    map.data.loadGeoJson('https://api.myjson.com/bins/k45by');
  }
</script>
...