使用谷歌地图绘制分区统计图

Question

我有一个由

{zip code, value}

对组成的数据集，希望在地图上将其可视化。

假设我的数据集结构是：

{
"pageType": "ZIP",
"ZIP": {
    "90638": {
        "OVERALL": "320.00"
    },
    "75594": {
        "OVERALL": "2985.02"
    },
    "10997": {
        "OVERALL": "55554.2"
    }
  }
}

我想使用与邮政编码相对应的彩色区域在 Google 地图上绘制这组邮政编码，如下面的屏幕截图所示。

d3js 或 highcharts 将不起作用，因为它们有一个用于绘制图表的国家/地区的位置文件。就我而言，我想为世界上任何国家实施它，所以我需要使用 Google 地图。

任何想法

Answer 1

您是否考虑过使用 OpenStreetMap shapefiles 或他们的 Nominatim 服务 来获取行政边界的多边形数据？这比尝试从 Google 地图中提取数据要容易得多，然后您就可以随心所欲地显示它。

例如，以下是GeoJSON 格式的古吉拉特邦边界，以及来自 Nominatim 服务的等效 HTML 视图。

Answer 2

我认为这是可能的，因为如果您在 Google 地图中输入邮政编码，它会返回邮政编码的区域，但是似乎没有“Google Zipcode API”可以直接通过 Google Javascript API 应用到绘制彩色邮政编码区域，这意味着您需要自己或从其他地方创建邮政编码表。请参阅如何使用 Google Maps API V3 绘制显示边界的简单邮政编码地图？（此处为旧讨论）

总之，我建议您查找邮政编码颜色区域的融合表图层，然后该值将很容易在 Google Maps Javascript API 上分配标记。

Answer 3

如果您还没有使用 Google 地图，您应该查看 Leaflet - 一个用于移动设备友好的交互式地图的开源 JavaScript 库 这里是 交互式 Choropleth 地图 的链接，看起来他们已经完成了大部分工作为你工作。来自教程：“这是一个在 GeoJSON 和一些自定义控件的帮助下创建美国各州人口密度彩色交互式分区统计图的案例研究......”功能、教程和代码示例非常丰富。我希望这有帮助。

Answer 4

您需要使用 Google 地图的 Geocoder 库。它可以将邮政编码和城镇对解析为地图位置。

我添加了国家/地区元素以获得更准确的结果。

在此示例中，您可以使用邮政编码创建标记。您应该添加更多代码来显示数据集中每个邮政编码的值。

/*
 * declare map as a global variable
 */
var map;

/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function() {

  /*
   * create map
   */
  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(35.38905, -40.078125),
    zoom: 1,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  /*
   * create infowindow (which will be used by markers)
   */
  var infoWindow = new google.maps.InfoWindow();

  /*
   * marker creater function (acts as a closure for html parameter)
   */
  function createMarker(options, html) {
    var marker = new google.maps.Marker(options);
    if (html) {
      google.maps.event.addListener(marker, "click", function() {
        infoWindow.setContent(html);
        infoWindow.open(options.map, this);
      });
    }
    return marker;
  }

  function createMarkerZip(zipcode, town, country) {
    var direction = zipcode + ',' + town + ',' + country;
    var geocoder = new google.maps.Geocoder();

    geocoder.geocode({
        'address': direction
      },
      function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          createMarker({
            position: new google.maps.LatLng(
              results[0].geometry.location.lat(),
              results[0].geometry.location.lng()),
            map: map
          }, direction);
        } else {
          console.log("Zip: " + zipcode + ", town: " + town + " not found :-(");
        }
      }
    );
  }

  createMarkerZip('46003', 'valencia', 'spain');
  createMarkerZip("nv 89821", "crescent valley", "usa");
  createMarkerZip("va 22310", "alexandria", "usa");

});

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map_div" style="height: 400px;"></div>

https://jsfiddle.net/netvicious/4m2vf0dh/

注意：您应该将密钥添加到 Google 地图脚本中以使其正常工作。