我正在尝试在 Google Maps 上使用 d3.js 在同一纬度/经度上覆盖多个标记。我要显示的数据是天气数据，所以我希望标记一次显示温度、露点、相对湿度等。我需要让标记偏移给每个标记的纬度/经度点。我的地图位于http://alert.fcd.maricopa.gov/alert/Google/v3/mobile_test.html点击数据集，然后点击天气数据。现在只有露点会显示，我相信 temp 在下面，因为我的 javascript 文件没有任何错误。
我希望标记如何显示的图片位于Image
function updateWxImage() {
var reqstamp = Number(new Date());
var rptDate = " ";
var strDataset = "";
var item = $('#date')[0];
item.style.background = "#ffff00";
item.style.color = "#000000";
item.innerHTML = "<strong>...updating dataset...</strong>";
ClearOverlays();
var width = 36;
var height = 12;
// Start D3 Code
var fill = d3.scale.linear()
.domain([0.0, 150.0])
.range(["black", "black"]);
// Load the station data. When the data comes back, create an overlay.
// Calls currain.php which converts xml to json
d3.json("./php/currentwx.php", function(jsonData) {
overlayD3 = new google.maps.OverlayView();
var data = jsonData.data;
// Add the container when the overlay is added to the map.
overlayD3.onAdd = function() {
var layer = d3.select(this.getPanes().floatPane).append("div")
.attr("class", "stations")
.attr("id", "stations");
// Draw each marker as a separate SVG element.
// We could use a single SVG, but what size would it have
overlayD3.draw = function() {
var projection = this.getProjection();
padding = 12;
var marker1 = layer.selectAll("svg")
.data(d3.entries(data))
.each(transform) // update existing markers
.enter().append("svg:svg")
.each(transform)
.attr("class", "marker")
.attr("id", "marker")
.attr("width", width)
.attr("height", height)
.attr("title", function(d) { return d.value.tempid + ' - ' + d.value.name; })
.on("click", function(d) { addTempInfoWindow(d); });
// Add a rectangle.
marker1.append("svg:rect")
.attr("x", 0)
.attr("y", 0)
.attr("rx", 4)
.attr("ry", 4)
.attr("width", padding*3)
.attr("height", padding)
.attr("title", function(d) { return d.value.tempid + ' - ' + d.value.name; })
.style("fill", function(d) { return fill(d.value.temp); })
.style("display", function(d) { if (d.value.temp == 0 || d.value.temp < -90) { return "none"; } else { return "inline"; }});
// Add a label.
marker1.append("svg:text")
.attr("x", padding*1.5)
.attr("y", padding*0.85)
.attr("text-anchor", "middle")
.attr("font-weight", "bold")
.attr("font-size", function(d) { if (d.value.temp == 0 || d.value.temp < -90) { return padding*1.05; } else { return padding; }})
.style("fill", function(d) {
if (d.value.temp < -90) {
return "red";
} else {
return "red";
}
})
.text(function(d) {
if (d.value.temp < -90) {
return "M";
} else {
return d.value.temp;
}
});
function transform(d) {
d = new google.maps.LatLng(d.value.latitude, d.value.longitude);
d = projection.fromLatLngToDivPixel(d);
return d3.select(this)
.style("left", d.x + "px")
.style("top", d.y + "px");
}
};
overlayD3.onRemove = function() {
var marker = d3.select("#marker").remove();
var layer = d3.select("#stations").remove();
};
};
overlayD3.setMap(map);
overlayD3.onAdd = function() {
var layer = d3.select(this.getPanes().floatPane).append("div")
.attr("class", "stations")
.attr("id", "stations");
// Draw each marker as a separate SVG element.
// We could use a single SVG, but what size would it have
overlayD3.draw = function() {
var projection = this.getProjection();
padding = 12;
var marker2 = layer.selectAll("svg")
.data(d3.entries(data))
.each(transform) // update existing markers
.enter().append("svg:svg")
.each(transform)
.attr("class", "marker2")
.attr("id", "marker2")
.attr("width", width)
.attr("height", height)
.attr("title", function(d) { return d.value.dewpointid + ' - ' + d.value.name; })
.on("click", function(d) { addDewpointInfoWindow(d); });
// Add a rectangle.
marker2.append("svg:rect")
.attr("x", 0)
.attr("y", 0)
.attr("rx", 4)
.attr("ry", 4)
.attr("width", padding*3)
.attr("height", padding)
.attr("title", function(d) { return d.value.dewpointid + ' - ' + d.value.name; })
.style("fill", function(d) { return fill(d.value.dewpoint); })
.style("display", function(d) { if (d.value.dewpoint == 0 || d.value.dewpoint < -90) { return "none"; } else { return "inline"; }});
// Add a label.
marker2.append("svg:text")
.attr("x", padding*1.5)
.attr("y", padding*0.85)
.attr("text-anchor", "middle")
.attr("font-weight", "bold")
.attr("font-size", function(d) { if (d.value.dewpoint == 0 || d.value.dewpoint < -90) { return padding*1.05; } else { return padding; }})
.style("fill", function(d) {
if (d.value.dewpoint < -90) {
return "red";
} else {
return "turquoise";
}
})
.text(function(d) {
if (d.value.dewpoint < -90) {
return "M";
} else {
return d.value.dewpoint;
}
});
function transform(d) {
d = new google.maps.LatLng(d.value.latitude, d.value.longitude);
d = projection.fromLatLngToDivPixel(d);
return d3.select(this)
.style("left", d.x + "px")
.style("top", d.y + "px");
}
};
overlayD3.onRemove = function() {
var marker2 = d3.select("#marker2").remove();
var layer = d3.select("#stations").remove();
};
};
overlayD3.setMap(map);
// Get the date that the report was created from the meta object in the json file
var meta = jsonData.meta;
var rptDate = meta.created;
item = $('#date')[0];
item.style.background = "#9CF";
item.style.color = "black";
$('#date')[0].innerHTML = "Data: " + rptDate + strDataset + "(Weather)";
});
}
我认为我需要编辑此部分，但我尝试过的一切都不成功。
function transform(d) {
d = new google.maps.LatLng(d.value.latitude, d.value.longitude);
d = projection.fromLatLngToDivPixel(d);
return d3.select(this)
.style("left", d.x + "px")
.style("top", d.y + "px");
}
};