Question

我希望实现此页面中显示的圆形可视化，并且已在文件中指定了geojson数据。

https://developers.google.com/maps/documentation/javascript/earthquakes

我的数据格式为

var data = {'features': [{'properties': {}, 'geometry': {'coordinates': [1.3944646999999999, 103.74665109999999], 'type': 'Point'}, 'type': 'Feature'}], 'type': 'FeatureCollection'};

还有更多积分。我已将map.data.loadGeoJson更改为map.data.addGeoJson。但是，当我打开文件时，普通地图显示没有任何点或圆圈。

以下是删除了API密钥的完整代码。有人能指出我正确的方向吗？谢谢。

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 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;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      var data = {'features': [{'properties': {}, 'geometry': {'coordinates': [1.3944646999999999, 103.74665109999999], 'type': 'Point'}, 'type': 'Feature'}], 'type': 'FeatureCollection'};

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: {lat: -33.865427, lng: 151.196123},
          mapTypeId: 'terrain'
        });

        map.data.addGeoJson(data); //add the data here

        map.data.setStyle(function(feature) {
          var magnitude = 4; //feature.getProperty('mag');
          return {
            icon: getCircle(magnitude)
          };
        });
      }

      function getCircle(magnitude) {
        return {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: 'red',
          fillOpacity: .2,
          scale: Math.pow(2, magnitude) / 2,
          strokeColor: 'white',
          strokeWeight: .5
        };
      }


    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=[key_removed]&callback=initMap">
    </script>
  </body>
</html>

Answer 1

您的坐标是向后的（GeoJSON coordinates是有序的经度，纬度）：

'coordinates': [1.3944646999999999, 103.74665109999999],

应该是：

'coordinates': [103.74665109999999, 1.3944646999999999],

代码段

＆＃13;

var map;
var data = {
  'features': [{
    'properties': {},
    'geometry': {
      'coordinates': [103.74665109999999, 1.3944646999999999],
      'type': 'Point'
    },
    'type': 'Feature'
  }],
  'type': 'FeatureCollection'
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {
      lat: -33.865427,
      lng: 151.196123
    },
    mapTypeId: 'terrain'
  });

  map.data.addGeoJson(data); //add the data here

  map.data.setStyle(function(feature) {
    var magnitude = 4; //feature.getProperty('mag');
    return {
      icon: getCircle(magnitude)
    };
  });
}

function getCircle(magnitude) {
  return {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: 'red',
    fillOpacity: .2,
    scale: Math.pow(2, magnitude) / 2,
    strokeColor: 'white',
    strokeWeight: .5
  };
}
google.maps.event.addDomListener(window, "load", initMap);

＆＃13;

/* 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;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

＆＃13;

谷歌圈子可视化没有出现

1 个答案: