Uncaught TypeError: n is not a function d3.js. While trying to overlay us_map on google maps

Question

我正在尝试将具有不同州的美国地图叠加在 google 地图上。我知道我可以使用 Google 地图的 loadGeoJson 功能，但我想为不同的州着色。

这是我正在尝试的代码。我在粘贴代码时删除了 API-Key。

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style>

html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.stations, .stations svg {
  position: absolute;
}

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

.stations circle {
  fill: brown;
  stroke: black;
  stroke-width: 1.5px;
}

</style>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key="></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

// Create the Google Map…



    d3.json("https://raw.githubusercontent.com/alignedleft/d3-book/master/chapter_12/us-states.json", function(json) {
    var map = new google.maps.Map(d3.select("#map").node(), {
  zoom: 3,
  center: new google.maps.LatLng(12.9716, 77.59),
  mapTypeId: google.maps.MapTypeId.TERRAIN
});
    var overlay=new google.maps.OverlayView();

    overlay.onAdd=function(){
     var layer = d3.select(this.getPanes().overlayLayer).append("div")
        .attr("class", "stations");

         overlay.draw = function() {
      var projection = this.getProjection();
          padding = 10;
        var path=d3.geo.path().projection(projection);

         var states = layer.append("svg")                   //svg width and height needs to be set.
         .append("g")
         .selectAll("path")
         .data(json.features)
         .enter().append("path")
        .attr("d", path)
        .attr("fill","blue"); 
};
};
overlay.setMap(map);        



    });


</script>

我收到以下错误。此错误已在 jquery 部分中得到解决，其中 $ 符号显然是问题所在，必须将其删除。但是，我找不到 d3 的解决方案。

d3.v3.min.js:2 Uncaught TypeError: n is not a function
    at http://d3js.org/d3.v3.min.js:2:870
    at u (http://d3js.org/d3.v3.min.js:1:31886)
    at Object.c [as point] (http://d3js.org/d3.v3.min.js:2:43)
    at Object.point (http://d3js.org/d3.v3.min.js:2:2392)
    at pt (http://d3js.org/d3.v3.min.js:1:19817)
    at gt (http://d3js.org/d3.v3.min.js:1:19916)
    at Object.Polygon (http://d3js.org/d3.v3.min.js:4:1080)
    at ht (http://d3js.org/d3.v3.min.js:1:19734)
    at Object.Feature (http://d3js.org/d3.v3.min.js:4:601)
    at Object.ao.geo.stream (http://d3js.org/d3.v3.min.js:4:556)(anonymous function) @ d3.v3.min.js:2u @ d3.v3.min.js:1c @ d3.v3.min.js:2(anonymous function) @ d3.v3.min.js:2pt @ d3.v3.min.js:1gt @ d3.v3.min.js:1Polygon @ d3.v3.min.js:4ht @ d3.v3.min.js:1Feature @ d3.v3.min.js:4ao.geo.stream @ d3.v3.min.js:4n @ d3.v3.min.js:4o @ d3.v3.min.js:1(anonymous function) @ d3.v3.min.js:3Y @ d3.v3.min.js:1Co.each @ d3.v3.min.js:3Co.attr @ d3.v3.min.js:3overlay.draw @ overlay_hazard_map.html:63Jy @ overlay.js:1(anonymous function) @ js?libraries=places&key=MYKEY:112
d3.v3.min.js:2 Uncaught TypeError: n is not a function(…)(anonymous function) @ d3.v3.min.js:2u @ d3.v3.min.js:1c @ d3.v3.min.js:2(anonymous function) @ d3.v3.min.js:2pt @ d3.v3.min.js:1gt @ d3.v3.min.js:1Polygon @ d3.v3.min.js:4ht @ d3.v3.min.js:1Feature @ d3.v3.min.js:4ao.geo.stream @ d3.v3.min.js:4n @ d3.v3.min.js:4o @ d3.v3.min.js:1(anonymous function) @ d3.v3.min.js:3Y @ d3.v3.min.js:1Co.each @ d3.v3.min.js:3Co.attr @ d3.v3.min.js:3overlay.draw @ overlay_hazard_map.html:63Jy @ overlay.js:1_.zf.B @ js?libraries=places&key=MYKEY:112_.z.trigger @ js?libraries=places&key=.......

Answer 1

首先，您的错误 n is not a function 与您引用的 jquery 错误无关。由于 minification 个脚本，它们很相似。

不过，为了回答您的问题，google 地图投影与 d3 投影不同。你必须将一个翻译成另一个。不过这很简单:

var projection = this.getProjection();

var g2d3Proj = function(coor) {
  var gCoor = new google.maps.LatLng(coor[1], coor[0]),
      pCoor = projection.fromLatLngToDivPixel(gCoor);
  return [pCoor.x, pCoor.y];
}

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

我在查看您的代码时注意到的其他事项：

您正在 CSS 中将 svg height/width 设置为 60x20px。这对于您的地图来说太小了。
我不会在叠加绘制中附加 svg。附加它 onAdd，这样您就不会在平移或缩放时继续重新附加。
您没有正确处理 enter/update 选择，因此平移地图或缩放不会重绘叠加层。
您正在绘制美国各州，但您的地图以印度附近为中心。

解决所有这些问题会产生以下结果：

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style>
  html,
  body,
  #map {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .stations,
  .stations svg {
    position: absolute;
    width: 1000px;
    height: 1000px;
  }
</style>
<div id="map"></div>
<script src="//maps.google.com/maps/api/js"></script>
<script src="//d3js.org/d3.v3.js"></script>
<script>
  d3.json("https://raw.githubusercontent.com/alignedleft/d3-book/master/chapter_12/us-states.json", function(error, json) {

    if (error) console.warn(error);

    var map = new google.maps.Map(d3.select("#map").node(), {
      zoom: 3,
      center: new google.maps.LatLng(39, -98),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });
    var overlay = new google.maps.OverlayView();

    overlay.onAdd = function() {
      var layer = d3.select(this.getPanes().overlayLayer).append("div")
        .attr("class", "stations");

      var svg = layer.append("svg");

      overlay.draw = function() {

        var projection = this.getProjection();
        var projection = this.getProjection();

        var g2d3Proj = function(coor) {
          var gCoor = new google.maps.LatLng(coor[1], coor[0]),
            pCoor = projection.fromLatLngToDivPixel(gCoor);
          return [pCoor.x, pCoor.y];
        }

        var path = d3.geo.path().projection(g2d3Proj);
        
        var states = svg
          .selectAll("path")
          .data(json.features);
        states
          .enter().append("path");
        states
          .attr("d", path)
          .attr("fill", "blue");
      };
    };
    overlay.setMap(map);
  });
</script>

Uncaught TypeError: n is not a function d3.js. While trying to overlay us_map on google maps

Uncaught TypeError: n is not a function d3.js. While trying to overlay us_map on google maps

javascript

jquery

google-maps

map-projections

d3.js