Javascript 嵌入d3.js覆盖的谷歌地图显示用户界面选项和覆盖元素，但不显示地图本身_Javascript_Google Maps_Google Maps Api 3_D3.js

Javascript 嵌入d3.js覆盖的谷歌地图显示用户界面选项和覆盖元素，但不显示地图本身

javascript google-maps google-maps-api-3 d3.js

Javascript 嵌入d3.js覆盖的谷歌地图显示用户界面选项和覆盖元素，但不显示地图本身,javascript,google-maps,google-maps-api-3,d3.js,Javascript,Google Maps,Google Maps Api 3,D3.js,我已经仔细研究过了，还没有发现一个问题的解决方案适合我——这是我的第一个问题，尽管我长期以来一直在使用堆栈——所以我真的希望这不是一个重复：）我有一个嵌入在我的主页与D3覆盖地图。我已经在一个独立的页面上运行了这段代码，每个页面的宽度和高度都为100%。通过在d3map标记中显式设置样式，我解决了width=0元素的初始问题。因此，map元素存在，我甚至可以看到UI选项（！）。我还看到了覆盖点。但是，地图本身是空白的尝试的修复和失败的修复： 1）使用google.maps（map，“res

我已经仔细研究过了，还没有发现一个问题的解决方案适合我——这是我的第一个问题，尽管我长期以来一直在使用堆栈——所以我真的希望这不是一个重复：）

我有一个嵌入在我的主页与D3覆盖地图。我已经在一个独立的页面上运行了这段代码，每个页面的宽度和高度都为100%。通过在d3map标记中显式设置样式，我解决了width=0元素的初始问题。因此，map元素存在，我甚至可以看到UI选项（！）。我还看到了覆盖点。但是，地图本身是空白的

尝试的修复和失败的修复： 1）使用google.maps（map，“resize”）调整地图大小； 2）添加google.maps.event.addDomListener（窗口“加载”，初始化）

我的（相关）代码如下，请让我知道我还可以提供什么，并提前感谢您

<!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>


#d3map{
位置：绝对位置；
宽度：800px；
高度：300px；
保证金：0；
填充顶部：30px；
垫底：10px；
溢出：滚动；
显示：块；
}
.stations、.stations svg{
位置：绝对位置；
}
.电台svg{
宽度：140px；
高度：20px；
填充顶部：10px；
垫底：10px；
字体风格：粗体；
字体：10px无衬线；
}
我喜欢地图。这是我的人生地图
var svg=d3.选择（“d3map”）.追加（“svg”）
.attr（“宽度”，700）
.attr（“高度”，400）；
var映射；
//创建谷歌地图\
var map=new google.maps.map（d3.select（“d3map”）.node（）{
缩放：12，
中心：新的google.maps.LatLng（-77.1178769,39.0087789），
mapTypeId:google.maps.mapTypeId.TERRAIN
});
控制台日志（map）；
//谷歌地图（地图，“调整大小”）；
//google.maps.event.trigger（map，“resize”）；
//加载故事和点数据。当数据返回时，创建一个覆盖。
d3.json（“travels.json”），函数（数据）{
控制台日志（数据）；
var overlay=new google.maps.OverlayView（）；
var点=数据。特征；
控制台日志（点）；
var tooltip=d3.select（“body”）.append（“div”）.attr（“class”，“tooltip”）；
//将覆盖添加到地图时添加容器。
overlay.onAdd=函数（）{
var layer=d3.select（this.getPanes（）.overlayer.append（“div”）
.attr（“类”、“站”）；
//将每个标记绘制为单独的SVG元素。
//我们可以使用单个SVG，但它的大小是多少？
overlay.draw=函数（）{
var projection=this.getProjection（），
填充=10；
var marker=layer.selectAll（“svg”）
.数据（d3.条目（点））
.each（转换）//更新现有标记
.enter（）.append（“svg:svg”）
.每个（转换）
.attr（“类别”、“标记”）；
//加一个圆圈。
marker.append（“svg:circle”）
.attr（“r”，4.5）
.attr（“cx”，填充）
.attr（“cy”，填充）
//添加一个标签。
marker.append（“svg:text”）
.attr（“x”，填充+7）
.attr（“y”，填充）
.attr（“dy”，“.31em”）
.text（函数（d）{返回d.value.properties.Name；}）；
函数变换（d）{
d=新的google.maps.LatLng（d.value.geometry.coordinates[1]，
d、 value.geometry.coordinates[0]）；
d=投影。从LatlngToDivPixel（d）；
返回d3。选择（此）
.样式（“左”（d.x-填充）+“px”）
.样式（“顶部”（d.y-填充）+“px”）；
印刷品（d）；
}
};
};
//将覆盖图绑定到地图上…
覆盖.setMap（map）；
});
//添加DOM元素侦听器以在加载div时初始化映射
google.maps.event.addDomListener（窗口“加载”，初始化）；

这里有几件事：

<> 1）你的“强\主/强”问题是你的懒惰使你处于中间地位。如果你把它们倒过来，你就在马里兰州的贝塞斯达附近

2.）您没有

初始化

功能。我想你的意思是：

// 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 ...

嘿，马克，谢谢你的快速修复。我做了这些修改，地图很好用。但是，这些点未缩放/定位在正确的位置。它们也仅在按住鼠标平移地图时才固定到位，而不是缩放。关于这件事有什么想法吗？@jaellis，没有足够的信息来回答你。您需要为我提供一个可复制的示例（如plunker或JSFIDLE）。
<div id="d3map" ...