D3.js 从 csv 读取 Lat Long 坐标到 Google Map答案

【问题标题】：D3.js reading Lat Long coordinates from csv into Google MapD3.js 从 csv 读取 Lat Long 坐标到 Google Map
【发布时间】：2014-02-13 01:14:49
【问题描述】：

我正在尝试使用 D3 和 csv 文件将点添加到谷歌地图上。我似乎能够正确读取经纬度坐标，但它们不会在地图上的任何地方绘制。

var map = new google.maps.Map(d3.select("#map").node(), 
{
  zoom: 11,
  center: new google.maps.LatLng(39.654835520000063, -105.01942651999994),
  mapTypeId: google.maps.MapTypeId.TERRAIN
});

d3.csv("data.csv", function(error, data) 
{
    var overlay = new google.maps.OverlayView();
overlay.draw = function() {
d3.select("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cy", function(d) 
    {
        return [d.longitude, d.latitude][0];
    })
    .attr("cx", function(d) 
    {
        return [d.longitude, d.latitude][1];
    })
    .attr("r", 5)
    .style("fill", "blue");     
}
overlay.setMap(map);
});

【问题讨论】：

你需要投影坐标。你见过this example吗？

标签： google-maps csv d3.js latitude-longitude points

【解决方案1】：

您需要设置 overlay.onAdd 函数。 onAdd() 在使用有效地图调用 overlay.setMap() 后调用一次。如果您没有在 onAdd() 中指定要实现的任何内容（默认情况下是一个空函数），则不会发生任何事情。因此，您应该使用 onAdd 来初始化 DOM 覆盖元素。

例如，上面共享的代码使用以下实现： overlay.onAdd = function() { var layer = d3.select(this.getPanes().overlayLayer).append("div") .attr("class", "stations"); //more code here }

layer 变量是你想要查看的。

【讨论】：