Question

使用Data-Driven Documents将JSON数据与Google maps进行整合。 JavaScript在工作站位置叠加一个圆圈和标签。 Here is an example.

Here is JavaScript file

Here is JSON file

除了工作站位置的LatLng，JSON文件还包含土壤化学数据。以下是站点位置24的示例： "24": { "latitude": 31.967240000000004, "longitude": -111.09028, "pH Buffer": 0.0, "pH": 7.53, "Aluminum": 25.28, "Antimonies": 0.32, "Arsenic ": 0.08, "Barium": 46.27, "Beryllium": 0.2, "Boron": 0.66, "Cadmium": 0.03, <more> "Zinc": 0.15 },

JSON文件将更新，以编码化学数据和测量符号 - （mg / kg）。

如何更新JavaScript以显示mouseover上的化学信息。

希望达到与US Congressional Districts和New York Times相同的效果。

两者都在mouseover（NYT）或mouseclick（美国国会区）实施弹出式信息。

在美国国会区的情况下，使用GitHub服务呈现地图和弹出窗口。弹出窗口中提供了GeoJSON文件中的一部分信息。

例如："properties": {"startcong": "103", "district": "0", "statename": "Wyoming", "endcong": "112", "id": "056103112000"}

在弹出表中显示：

| startcong | 103             |
| district  | 0               |
| statename | Wyoming         |
| member    | [object Object] |
| endcong   | 112             |
| id        | 056103112000    |

想要集成一个类似于GitHub使用的服务，但是要集成一个独立的HTML + JS文件。

Answer 1

Google地图无法提供高度灵活性来自定义地图。 NYT和美国国会区的例子没有使用谷歌地图。 NYT正在使用USA Albers地图的直接SVG文件。

也就是说，谷歌地图事件处理程序可以通过禁用它们来覆盖。在地图选项中添加disableDoubleClickZoom：true

var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 8,
center: new google.maps.LatLng(32.96,  -111.090),
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDoubleClickZoom: true,
scrollwheel: false
});

还将overlayLayer更改为overlayMouseTarget

var layer = d3.select(this.getPanes().overlayMouseTarget).append("div")

现在添加工具提示到地图上显示的圆圈。我更喜欢使用d3.tips

var tip = d3.tip()
              .attr('class', 'd3-tip')
              .offset([+20, -20])
              .html(function(d) {
                console.log(d);
                return "<span style='color:blue'>"+JSON.stringify(d.value)  + "</span>";
              })


// Add a circle.
marker.append("svg:circle")
.attr("r", 4.5)
.attr("cx", padding)
.attr("cy", padding)
.on("mouseover",tip.show)
.on("mouseout", tip.hide)
.call(tip);

将数据弹出窗口添加到d3js地图

1 个答案: