Question

我正尝试使用以下代码将第一级JSON对象中的圆圈附加到Google地图（在here中描述）：

layer_01.selectAll("svg")
        .data(data_[0]) // 1st level JSON
        .each(Transform)
        .enter()
            .append("svg")
            .each(Transform)
            .attr("class", "marker")
            .append("circle")
            .classed("bubble", true)
            .attr("r", 6)
            .attr("cx", padding_01)
            .attr("cy", padding_01)
            .style("fill", "#696969");

但它没有生成。我曾尝试在StackOverflow上查看各种帖子，但这些都没有解决问题。有人有解决方案吗？

这是JSON数据集：

[
  {
    "Longitude": -121.914321,
    "Latitude": 37.88168,
    "Result List": [

      {
        "Latitude": 38.896564,
        "Score": 3,
        "Longitude": -121.076889
      },
      {
        "Latitude": 37.520431,
        "Score": 2,
        "Longitude": -121.817997
      }
    ]
  }
]

这是完整的代码：

<!DOCTYPE html>

<html lang = "en">
    <head>
        <meta charset = "utf-8">
        <meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no"/>

        <style>
            .station, .station svg{
                position: absolute;
            }

            .station svg{
                width: 60px;
                height: 20px;
                padding-right: 100px;
                font: 10px;
            }

        </style>

        <script src = "https://maps.google.com/maps/api/js?sensor=true"></script>
        <script src = "//d3js.org/d3.v3.min.js"></script>
    </head>

    <body>
        <div id = "map"></div>

        <script>
            var style_01 = [{stylers: [{lightness: 70}]}];  

            d3.json("data.json", function(error_, data_){
                if (error_) throw error_;

                mean_lat = d3.mean(data_,function(d_) {
                    return d_["Latitude"]
                })

                mean_lon = d3.mean(data_,function(d_) {
                    return d_["Longitude"]
                })

                var styledMap_01 = new google.maps.StyledMapType(style_01, {name: "Styled Map"});

                var map_01 = new google.maps.Map(d3.select("#map").node(), {

                    center: new google.maps.LatLng(mean_lat, mean_lon),
                    mapTypeIds: [google.maps.MapTypeId.ROADMAP, "map_style"],
                    zoom: 8,
                });

                var overlay_01 = new google.maps.OverlayView();

                overlay_01.onAdd = function(){
                    var layer_01 = d3.select(this.getPanes().overlayLayer).append("div")
                            .attr("class", "station");

                    // Drawing each marker as a separate SVG element.
                    overlay_01.draw = function(){
                        var projection_01 = this.getProjection();
                        var padding_01 = 10;

                        // Adding circle from 2nd level JSON
                        var marker_01 = layer_01.selectAll("svg")
                            .data(data_[0]["Result List"]) 
                            .each(Transform)
                            .enter()
                                .append("svg")
                                .each(Transform)
                                .attr("class", "marker");

                        marker_01.append("circle")
                            .classed("bubble", true)
                            .attr("r", function(d_){
                                return 2 * d_["Score"];
                            })
                            .attr("cx", padding_01)
                            .attr("cy", padding_01)
                            .style("fill", "#696969")
                            .style("stroke", "#FFFF00")
                            .style("stroke-width", "3px");



                        // Adding circle from 1st level JSON (does not work!)
                        layer_01.selectAll("svg")
                            .data(data_[0]) // 1st level JSON
                            .each(Transform)
                            .enter()
                                .append("svg")
                                .each(Transform)
                                .attr("class", "marker")
                                .append("circle")
                                .classed("bubble", true)
                                .attr("r", 6)
                                .attr("cx", padding_01)
                                .attr("cy", padding_01)
                                .style("fill", "#696969");

                        function Transform(d_){
                            d_ = new google.maps.LatLng(d_["Latitude"], d_["Longitude"]);
                            d_ = projection_01.fromLatLngToDivPixel(d_);

                            console.log(d_)
                            return d3.select(this)
                                .style("left", (d_.x - padding_01) + "px")
                                .style("top", (d_.y - padding_01) + "px");
                        }

                    };
                };
            map_01.mapTypes.set("map_style", styledMap_01)
            map_01.setMapTypeId("map_style")
            overlay_01.setMap(map_01)
            })

        </script>

    </body>
</html>

无法使用d3在Google地图上添加圆圈

0 个答案: