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

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

本文关键字：叠加 地图 元素 选项 显示 嵌入式 d3 Google js 带有 UI      更新时间：2023-09-26

我已经彻底研究了，还没有看到一个解决方案适合我的问题 - 这是我的第一个问题，尽管我长期使用堆栈 - 所以我真的希望这不是一个重复的:)

我的主页上有一个带有 D3 叠加层的嵌入式地图。 我已经让这段代码在一个独立的页面上运行，宽度和高度各= 100%。 我通过在 d3map 标签中显式设置样式来解决 width=0 元素的初始问题。所以，地图元素存在，我什至看到了 UI 选项（！ 我也看到了叠加点。 但是，地图本身是空白的。

尝试和失败的修复：1）使用google.maps调整地图大小（map，"调整大小"）;2）添加google.maps.event.addDomListener（window，'load'，initialize）;

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

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

这里有几件事：

1.）你的主要问题是你的LatLng把你放在南极洲的中间。 如果你反转它们，你将在马里兰州的贝塞斯达附近。

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

这是一个修复问题的示例。

相关文章：