Google maps 将D3地图置于谷歌地图之上

更新***

我已经将地图添加到覆盖图中，但是当我关闭地图缩放功能时，我无法在d3地图上进行缩放，另外，如何将地图与谷歌对齐？[连结][1]

更新2

我终于把我的d3地图和谷歌地图对齐了，但是当我把地图缩放到一个固定的位置时

代码如下：`

var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 8,
center: new google.maps.LatLng(43.469740, 10.946157),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles:[{"stylers": [{"saturation": -75},{"lightness": 10}]}]
});

d3.json("weekdays0_level_2.json", function(error,data){
    if (error) throw error

    //console.log(data[0].comuni[0].geometry.coordinates);
    var overlay = new google.maps.OverlayView();

    overlay.onAdd = function() {

        var layer = d3.select(this.getPanes().overlayLayer).append("div")

        overlay.draw = function() {

            layer.select('svg').remove();

            var w = 900;
            var h = 600;

            var color = ['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628','#f781bf','#999999'];
            var heat_color = d3.scale.linear().domain([0, 1]).range(['#b2df8a', '#ff7f00']).interpolate(d3.interpolateHcl);

            var projection = d3.geo.albers()
                .center([0.13, 43.46])
                .rotate([350, 0])
                .scale(1200 * 12)
                .translate([w / 2, h / 2])
                .precision(.1);

            var path = d3.geo.path()
                         .projection(projection);

            var svg = layer.append("svg")
                .attr('width', w)
                .attr('height', h)

            for (var i=0; i < data.length; i++) {
                var mapc = color[i%color.length];
                for (var j=0; j < data[i].comuni.length; j++) {
                    console.log(data[i].comuni[j])
                    svg.append("path")
                        .datum(data[i].comuni[j])
                        .attr("d", path)
                        .attr('class','state selected')
                        .style("fill", mapc)
                        .style('opacity',.7)

                }
            }
        }
    }
    overlay.setMap(map);

});

var map=new google.maps.map（d3.select（“#map”）.node（）{
缩放：8，
中心：新google.maps.LatLng（43.469740,10.946157），
mapTypeId:google.maps.mapTypeId.ROADMAP，
样式：[{“样式器”：[{“饱和度”：-75}，{“亮度”：10}]
});
d3.json（“weekdays0_level_2.json”），函数（错误，数据）{
如果（错误）抛出错误
//console.log（数据[0].comuni[0].geometry.coordinates）；
var overlay=new google.maps.OverlayView（）；
overlay.onAdd=函数（）{
var layer=d3.select（this.getPanes（）.overlayer.append（“div”）
overlay.draw=函数（）{
layer.select（'svg'）.remove（）；
var w=900；
var h=600；
var color=['#e41a1c'、'#377eb8'、'#4daf4a'、'#984ea3'、'#ff7f00'、'#ffff33'、'#a65628'、'f781bf'、'99999'；
var heat_color=d3.scale.linear（）.域（[0,1]）.范围（[''#b2df8a'，'#ff7f00']）。插值（d3.interpolateHcl）；
var projection=d3.geo.albers（）
.中间（[0.13,43.46]）
.旋转（[350,0]）
.比例（1200*12）
.翻译（[w/2，h/2]）
.精度（.1）；
var path=d3.geo.path（）
.投影（投影）；
var svg=layer.append（“svg”）
.attr（'宽度'，w）
.attr（'高度'，h）
对于（变量i=0；i

`

有解决此问题的解决方案吗？

我将与您的数据结构相结合。您缺少的关键是将谷歌地图投影转换为

d3

可以使用的投影注意，我还重写了地图路径代码，以使用d3数据绑定而不是循环。在这里，这是它的所有运行的荣耀：

#地图{
高度：400px；
宽度：100%；
}
var map=new google.maps.map（d3.select（“#map”）.node（）{
缩放：8，
中心：新google.maps.LatLng（43.469740,10.946157），
mapTypeId:google.maps.mapTypeId.ROADMAP，
风格：[{
“造型师”：[{
“饱和”：-75
}, {
“轻盈”：10
}]
}]
});
d3.json（“https://jsonblob.com/api/1e7c9245-e4b6-11e6-90ab-914a66f2a924，函数（错误，数据）{
如果（错误）抛出错误
//console.log（数据[0].comuni[0].geometry.coordinates）；
var overlay=new google.maps.OverlayView（）；
overlay.onAdd=函数（）{
var layer=d3.select（this.getPanes（）.overlayer.append（“div”）
overlay.draw=函数（）{
layer.select（'svg'）.remove（）；
var w=900；
var h=600；
var color=['#e41a1c'、'#377eb8'、'#4daf4a'、'#984ea3'、'#ff7f00'、'#ffff33'、'#a65628'、'f781bf'、'99999'；
var heat_color=d3.scale.linear（）.域（[0,1]）.范围（[''#b2df8a'，'#ff7f00']）。插值（d3.interpolateHcl）；
var overlyprojection=this.getProjection（）；
//将叠加投影转换为d3投影
var googleMapProjection=函数（坐标）{
var googleCoordinates=new google.maps.LatLng（坐标[1]，坐标[0]）；
var pixelCoordinates=重叠投影。fromLatLngToDivPixel（谷歌坐标）；
返回[pixelCoordinates.x，pixelCoordinates.y]；
}
var path=d3.geo.path（）.projection（googleMapProjection）；
var svg=layer.append（“svg”）
.attr（'宽度'，w）
.attr（'高度'，h）
var g=svg.selectAll（“g”）
.数据（数据）
.输入（）
.附加（“g”）；
g、 选择全部（“路径”）
.数据（功能（d）{
返回d.comuni；
})
.输入（）
.append（“路径”）
.attr（“d”，路径）
.attr（'class'，'state selected'）
.样式（“填充”，功能（d，i）{
返回颜色[i%color.length]；
})
.style（'opacity'，.7）；
}
}
覆盖.setMap（map）；
});

我将与您的数据结构相结合。您缺少的关键是将谷歌地图投影转换为

d3

可以使用的投影注意，我还重写了地图路径代码，以使用d3数据绑定而不是循环。在这里，这是它的所有运行的荣耀：

#地图{
高度：400px；
宽度：100%；
}
var map=new google.maps.map（d3.select（“#map”）.node（）{
缩放：8，
中心：新google.maps.LatLng（43.469740,10.946157），
mapTypeId:google.maps.mapTypeId.ROADMAP，
风格：[{
“造型师”：[{
“饱和”：-75
}, {
“轻盈”：10
}]
}]
});
d3.json（“https://jsonblob.com/api/1e7c9245-e4b6-11e6-90ab-914a66f2a924，函数（错误，数据）{
如果（错误）抛出错误
//console.log（数据[0].comuni[0].geometry.coordinates）；
var overlay=new google.maps.OverlayView（）；
overlay.onAdd=函数（）{
var layer=d3.select（this.getPanes（）.overlayer.append（“div”）
overlay.draw=函数（）{
图层。选择（'svg'）。