使用谷歌地图绘制等值线答案

【问题标题】：plot choropleth using google maps使用谷歌地图绘制等值线
【发布时间】：2016-08-07 22:08:58
【问题描述】：

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

假设我的数据集结构是：

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

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

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

任何想法

【问题讨论】：

您是否需要邮政编码区域的颜色与给定邮政编码的值相对应？您是否需要清晰可见的邮政编码区域，或者您只是想要所有值的热图*？ *developers.google.com/maps/documentation/javascript/examples/…
您给出的示例使用 lat long。不，我不需要显示该区域。如果我能够为相应区域绘制标记就足够了。
您需要显示“OVERALL”变量的值吗？你想怎么做？
没有没有必要，有没有办法通过邮政编码和价值来绘制。

标签： javascript google-maps google-maps-api-3 maps

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

如果您没有使用 Google 地图，您应该查看Leaflet - an open-source JavaScript library for mobile-friendly interactive maps 这是Interactive Choropleth Map 的链接，他们似乎已经为您完成了大部分工作。来自教程：“这是一个在 GeoJSON 和一些自定义控件的帮助下创建美国各州人口密度的彩色交互式等值线图的案例研究......”功能、教程和代码示例是广泛的。我希望这会有所帮助。

【讨论】：

【解决方案4】：

您需要使用谷歌地图的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>

    /*
 * 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/4m2vf0dh/

注意：在 jsfiddle 上，您应该添加您的密钥以使其工作。

【讨论】：

jsfiddle 链接断开
已修复，谢谢，Google Maps 的问题现在需要使用一个 API，并且不适用于 jsfiddle。但是，如果您使用有效密钥对 js 进行正确调用，则代码将起作用；-)