我已经仔细研究过，但没有看到一个问题的解决方案适合我 - 这是我的第一个问题，尽管我长期以来一直使用堆栈 - 所以我真的希望这不是重复的:)
我的主页中有一个带有 D3 叠加层的嵌入式 map 。我已经让这段代码在一个独立页面上运行，宽度和高度均为 100%。我通过在 d3map 标记中显式设置样式解决了 width=0 元素的最初问题。所以， map 元素存在，我什至看到了 UI 选项(!)。我还看到了重叠的点。然而， map 本身是空白的。
尝试过但失败的修复: 1)使用 google.maps(map, "resize") 调整 map 大小； 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>
最佳答案
这里有一些事情:
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稍微修复一下。
关于javascript - 带有 d3.js 叠加层的嵌入式 Google map 显示 UI 选项和叠加元素，但不显示 map 本身，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28129615/