Question

我看得很透彻，并没有看到一个问题，其解决方案适合我的 - 这是我的第一个问题，虽然我已经使用了堆栈 - 所以我真的希望这不是重复：）< / p>

我的主页上有一个带有D3叠加层的嵌入式地图。我已经在独立页面上运行此代码，每个页面的宽度和高度均为100％。我通过在d3map标记中明确设置样式解决了我的width = 0元素的初始问题。因此，map元素存在，我甚至看到UI选项（！）。我也看到了重叠点。但是，地图本身是空白的。

尝试修复失败： 1）使用google.maps调整地图大小（map，“resize”）; 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>

Answer 1

这里几件事：

1。）你的主要问题是你的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叠加显示UI选项和叠加元素，但不显示地图本身

1 个答案: