带有 d3.js 叠加层的嵌入式 Google 地图显示 UI 选项和叠加层元素，但不显示地图本身

Question

我仔细研究过，没有发现适合我的解决方案的问题——这是我的第一个问题，尽管我长期使用 Stack——所以我真的希望这不是重复的： )

我的主页中有一张带有 D3 叠加层的嵌入式地图。我在宽度和高度分别为 100% 的独立页面上获得了此代码运行。我通过在 d3map 标记中显式设置样式解决了 width=0 元素的初始问题。所以，地图元素存在，我什至看到 UI 选项（！）。我也看到了重叠点。但是，地图本身是空白的。

尝试和失败的修复： 1) 使用 google.maps(map, "resize") 调整地图大小； 2) 添加 google.maps.event.addDomListener(window, 'load', 初始化);

我的（相关）代码如下，请让我知道我还能提供什么，提前谢谢你！

<!DOCTYPE HTML>
<head>
    <meta property="og:description" content="what I do and who I am"/>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <script type="text/javascript" src="http://maps.google.com/maps/api  /js?sensor=true"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
    <link type="text/css" rel="stylesheet" href="/style.css" /> 
</head>
<style>
#d3map {
    position: absolute;
  width: 800px;
  height: 300px;
  margin: 0;
  padding-top: 30px;
  padding-bottom: 10px;
  overflow: scroll;
  display:block;
}

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

.stations svg {
  width: 140px;
  height: 20px;
  padding-top: 10px;
   padding-bottom: 10px;
  font-style: bold;
   font: 10px sans-serif;
 }
</style>
<body>
<div id="map-text" style="padding-bottom:40px; position:relative;">i love maps. here's a map of my life</div>

<d3map style="width:700px; height:300px; position:absolute; padding-top: 50px;
padding-bottom: 10px;">
</d3map>
<script type="text/javascript">

var svg = d3.select("d3map").append("svg")
    .attr("width", 700)
    .attr("height", 400);

var map;

// Create the Google Map…\
var map = new google.maps.Map(d3.select("d3map").node(), {
  zoom: 12,
  center: new google.maps.LatLng(-77.1178769,39.0087789),
  mapTypeId: google.maps.MapTypeId.TERRAIN
});


console.log(map);
// google.maps(map, "resize");
// google.maps.event.trigger(map, "resize");

// Load the story and pointdata. When the data comes back, create an overlay.
d3.json("travels.json", function(data) {
    console.log(data);

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

var points = data.features;
console.log(points);

var tooltip = d3.select("body").append("div").attr("class","tooltip");

  // Add the container when the overlay is added to the map.
  overlay.onAdd = function() {
    var layer = d3.select(this.getPanes().overlayLayer).append("div")
        .attr("class", "stations");

    // Draw each marker as a separate SVG element.
    // We could use a single SVG, but what size would it have?
    overlay.draw = function() {
      var projection = this.getProjection(),
          padding = 10;

      var marker = layer.selectAll("svg")
          .data(d3.entries(points))
          .each(transform) // update existing markers
        .enter().append("svg:svg")
          .each(transform)
          .attr("class", "marker");

      // Add a circle.
      marker.append("svg:circle")
          .attr("r", 4.5)
          .attr("cx", padding)
          .attr("cy", padding)


      // Add a label.
      marker.append("svg:text")
          .attr("x", padding + 7)
          .attr("y", padding)
          .attr("dy", ".31em")
          .text(function(d) { return d.value.properties.Name;});

      function transform(d) {
        d = new google.maps.LatLng(d.value.geometry.coordinates[1],
          d.value.geometry.coordinates[0]);
        d = projection.fromLatLngToDivPixel(d);
        return d3.select(this)
            .style("left", (d.x - padding) + "px")
            .style("top", (d.y - padding) + "px");
            print(d);
      }
    };
  };

  // Bind our overlay to the map…
  overlay.setMap(map);
});

// Add a DOM element listener to initialize map when the div is loaded
google.maps.event.addDomListener(window, 'load', initialize);

</script>

</body>

Answer 1

这里有几件事：

1.) 您的 main 问题是您的 LatLng 将您置于 Antarctica 的中间。如果你扭转它们，你将在马里兰州贝塞斯达附近。

2.) 您没有 initialize 函数。我想你的意思是：

// Create the Google Map…\
function initialize() {
  var map = new google.maps.Map(document.getElementById("d3map"), {
    zoom: 12,
    center: new google.maps.LatLng(39.0087789,-77.1178769),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });
}

3.) 发明自己的 HTML 标签可能不是最佳做法：

<d3map ...

应该是：

<div id="d3map" ...

这里 example 稍微修正一下。

带有 d3.js 叠加层的嵌入式 Google 地图显示 UI 选项和叠加层元素，但不显示地图本身

Embedded Google Map with d3.js overlay shows UI options and overlay element but NOT the map itself

javascript

google-maps

google-maps-api-3

d3.js