Nar*_*B M 0 javascript jquery google-maps map-projections d3.js
我试图在谷歌地图上覆盖不同州的美国地图。我知道我可以使用loadGeoJson谷歌地图的功能，但我想为不同的状态着色。
这是我正在尝试的代码。我在粘贴代码时删除了 API 密钥。
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.stations, .stations svg {
position: absolute;
}
.stations svg {
width: 60px;
height: 20px;
padding-right: 100px;
font: 10px sans-serif;
}
.stations circle {
fill: brown;
stroke: black;
stroke-width: 1.5px;
}
</style>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key="></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// Create the Google Map…
d3.json("https://raw.githubusercontent.com/alignedleft/d3-book/master/chapter_12/us-states.json", function(json) {
var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 3,
center: new google.maps.LatLng(12.9716, 77.59),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var overlay=new google.maps.OverlayView();
overlay.onAdd=function(){
var layer = d3.select(this.getPanes().overlayLayer).append("div")
.attr("class", "stations");
overlay.draw = function() {
var projection = this.getProjection();
padding = 10;
var path=d3.geo.path().projection(projection);
var states = layer.append("svg") //svg width and height needs to be set.
.append("g")
.selectAll("path")
.data(json.features)
.enter().append("path")
.attr("d", path)
.attr("fill","blue");
};
};
overlay.setMap(map);
});
</script>
我收到以下错误。此错误已在 jquery 部分解决，其中显然 $ 符号是问题，必须删除。但是，我找不到 d3 的解决方案。
d3.v3.min.js:2 Uncaught TypeError: n is not a function
at http://d3js.org/d3.v3.min.js:2:870
at u (http://d3js.org/d3.v3.min.js:1:31886)
at Object.c [as point] (http://d3js.org/d3.v3.min.js:2:43)
at Object.point (http://d3js.org/d3.v3.min.js:2:2392)
at pt (http://d3js.org/d3.v3.min.js:1:19817)
at gt (http://d3js.org/d3.v3.min.js:1:19916)
at Object.Polygon (http://d3js.org/d3.v3.min.js:4:1080)
at ht (http://d3js.org/d3.v3.min.js:1:19734)
at Object.Feature (http://d3js.org/d3.v3.min.js:4:601)
at Object.ao.geo.stream (http://d3js.org/d3.v3.min.js:4:556)(anonymous function) @ d3.v3.min.js:2u @ d3.v3.min.js:1c @ d3.v3.min.js:2(anonymous function) @ d3.v3.min.js:2pt @ d3.v3.min.js:1gt @ d3.v3.min.js:1Polygon @ d3.v3.min.js:4ht @ d3.v3.min.js:1Feature @ d3.v3.min.js:4ao.geo.stream @ d3.v3.min.js:4n @ d3.v3.min.js:4o @ d3.v3.min.js:1(anonymous function) @ d3.v3.min.js:3Y @ d3.v3.min.js:1Co.each @ d3.v3.min.js:3Co.attr @ d3.v3.min.js:3overlay.draw @ overlay_hazard_map.html:63Jy @ overlay.js:1(anonymous function) @ js?libraries=places&key=MYKEY:112
d3.v3.min.js:2 Uncaught TypeError: n is not a function(…)(anonymous function) @ d3.v3.min.js:2u @ d3.v3.min.js:1c @ d3.v3.min.js:2(anonymous function) @ d3.v3.min.js:2pt @ d3.v3.min.js:1gt @ d3.v3.min.js:1Polygon @ d3.v3.min.js:4ht @ d3.v3.min.js:1Feature @ d3.v3.min.js:4ao.geo.stream @ d3.v3.min.js:4n @ d3.v3.min.js:4o @ d3.v3.min.js:1(anonymous function) @ d3.v3.min.js:3Y @ d3.v3.min.js:1Co.each @ d3.v3.min.js:3Co.attr @ d3.v3.min.js:3overlay.draw @ overlay_hazard_map.html:63Jy @ overlay.js:1_.zf.B @ js?libraries=places&key=MYKEY:112_.z.trigger @ js?libraries=places&key=.......
首先，您的错误n is not a function与您引用的 jquery 错误无关。由于脚本的缩小，它们很相似。
不过，要回答您的问题，谷歌地图投影与d3投影不同。您必须将一个翻译成另一个。不过这很简单：
var projection = this.getProjection();
var g2d3Proj = function(coor) {
var gCoor = new google.maps.LatLng(coor[1], coor[0]),
pCoor = projection.fromLatLngToDivPixel(gCoor);
return [pCoor.x, pCoor.y];
}
var path = d3.geo.path().projection(g2d3Proj);
我在查看您的代码时注意到的其他事情：
svg在 CSS 中将高度/宽度设置为 60x20px。这对于您的地图来说太小了。svg在叠加绘制中附加。附加它onAdd，这样你就不会在平移或缩放时不断重新附加。解决所有这些问题会产生这样的结果：
var projection = this.getProjection();
var g2d3Proj = function(coor) {
var gCoor = new google.maps.LatLng(coor[1], coor[0]),
pCoor = projection.fromLatLngToDivPixel(gCoor);
return [pCoor.x, pCoor.y];
}
var path = d3.geo.path().projection(g2d3Proj);