Question

我有一对{zip code, value}对的数据集，并希望在地图上将其可视化。

我们说我的数据集结构是：

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

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

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

任何想法

Answer 1

我认为这是可能的，因为如果您输入一个邮政编码到谷歌地图，它会返回邮政编码的区域，但似乎没有“Google Zipcode API”可以直接通过Google Javascript申请用于绘制颜色邮政编码区域的API，这意味着您需要自己或从其他地方创建邮政编码表。请参阅How do I do a simple zip code map showing boundaries with Google Maps API V3?（此处旧讨论）

总而言之，我建议您查找融合表层以获取邮政编码的颜色区域，然后在Google Maps Javascript API上轻松指定一个标记值。

Answer 2

您是否考虑过使用OpenStreetMap shapefiles或Nominatim service来获取管理边界的多边形数据？这比尝试从Google地图中删除数据更容易，然后您可以随意显示它。

例如，以下是来自Nominatim服务的state boundaries of Gujarat in GeoJSON format和equivalent HTML view。

Answer 3

您需要使用Google地图的 Geocoder library 。它可以将拉链和城镇对解析为地图位置。

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

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

<强> HTML

<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>

<强> JS

    /*
 * 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");

  });

https://jsfiddle.net/netvicious/f04L5ah6/3/

Answer 4

如果您未与Google地图结婚，则应查看Leaflet - an open-source JavaScript library for mobile-friendly interactive maps以下是Interactive Choropleth Map的链接，其中显示他们已完成大部分工作。来自教程：＆＃34; 这是一个案例研究，在GeoJSON和一些自定义控件的帮助下创建美国国家人口密度的彩色互动等值线图... ＆＃34;功能，教程和代码示例非常广泛。我希望这会有所帮助。

使用谷歌地图绘制等值线

4 个答案: