Question

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

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);
});

Answer 1

您需要设置overlay.onAdd功能。在使用有效映射调用overlay.setMap（）之后调用onAdd（）。如果你没有在onAdd（）中指定要实现的任何东西（默认情况下是一个空函数），则不会发生任何事情。因此，您应该使用onAdd初始化DOM覆盖元素。

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

图层变量是您想要查看的内容。

D3.js将csv中的Lat Long坐标读入谷歌地图

1 个答案: