如何将本地geojson文件导入谷歌地图(热图)

时间:2017-09-25 12:36:37

标签: javascript google-maps-api-3 heatmap

我需要绘制一个热图,但是我的geojson文件的路径并不好。我已经读过需要HTML5 FileReader API或需要托管在与我的网页相同的地方(这不是用于制作的网页)但不确定它是否有效。有没有最简单的方法呢?

以下是我尝试过的代码示例:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: {lat: -33.865427, lng: 151.196123},
          mapTypeId: 'terrain'
        });

        var script = document.createElement('script');

        script.src = 'convertedcsv.js';
        document.getElementsByTagName('head')[0].appendChild(script);

      }

      function eqfeed_callback(results) {
        var heatmapData = [];
        for (var i = 0; i < results.features.length; i++) {
          var coords = results.features[i].geometry.coordinates;
          var latLng = new google.maps.LatLng(coords[1], coords[0]);
          heatmapData.push(latLng);
        }
        var heatmap = new google.maps.visualization.HeatmapLayer({
          data: heatmapData,
          dissipating: false,
          map: map
        });
      }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAfsaj0H_TZQKAYBz9htrd9s9SaX2DMEbU&libraries=visualization&callback=initMap">
    </script>
  </body>
</html>

0 个答案:

没有答案