我正在使用 Datamaps创建加拿大和美国的 map 。我在其网站上看到了教程和/或示例，并且看到了“仅限美国 map ”示例。我这样做了:
<script>
var addUSA = new Datamap({
scope: 'usa',
element: document.getElementById('usa-map'),
geographyConfig: {
highlightOnHover: false,
borderColor: '#006298',
borderWidth: 0.8,
popupTemplate: function(geography, data) {
return "<div class='hoverinfo'><strong>" + data.info + "</strong></div>";
}
},
dataUrl: 'data.json',
dataType: 'json',
data: {},
fills: {
defaultFill: '#FFFFFF'
}
});
addUSA.labels();
</script>
所以我假设您也可以创建“仅限加拿大 map ”。但问题是，我不知道如何将两个国家结合起来。
我的目标是标签、hover-info 和 json，这就是我使用 Datamaps 的原因。
最佳答案
所以我找到了 Mark DiMarco 在 Datamaps 中标题为 Custom Map Data 的 URL，我使用并尝试复制他所做的。在该链接上，他创建了一张阿富汗 map ，该 map 未包含在 Datamaps 网站上的主要示例中。但不是一个国家，我们将使用 Datamaps 组合两个国家的自定义 map 。这是我做的一个实验，但我希望这能解决你的问题
首先，他为阿富汗创建了一个自定义的topo json。他发布了一个关于如何创建自定义 map 数据的教程，但我认为我没有访问权限，因为我收到了 404 或者他将其删除了。回过头来看，他用于自定义拓扑 json 的代码也可以在他的其他作品中找到，位于 Datamaps 网站的“更多版本”链接。您只需要查找制作自定义地形 json 所需的国家/地区。最后，查找 datamaps.afg.js 和 datamaps.usa.js；并获取json。
我只有 1 个声望，而且我只能使用两个 URL。只需访问此 GitHub我为加拿大和美国放置了这两个自定义 topo json 的站点。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Canada and USA</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://rawgithub.com/markmarkoh/datamaps/master/dist/datamaps.none.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- CANADA -->
<h1>CANADA</h1>
<div id="canada"></div>
<!-- USA -->
<h1>USA</h1>
<div id="usa"></div>
</body>
</html>
CSS
#canada {
border: 1px solid #000000;
height: 450px;
width: 400px;
}
#usa {
border: 2px solid #EDA552;
height: 400px;
width: 500px;
}
查询
$(function() {
var canadaMap = new Datamap({
element: document.getElementById('canada'),
geographyConfig: {
dataUrl: 'canada.topo.json'
},
scope: 'canada',
fills: {
defaultFill: '#bada55'
},
setProjection: function(element) {
var projection = d3.geo.mercator()
.center([-95, 71])
.scale(200)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path().projection(projection);
return {path: path, projection: projection};
}
});
var USAmap = new Datamap({
element: document.getElementById('usa'),
geographyConfig: {
dataUrl: 'usa.topo.json'
},
scope: 'usa',
fills: {
defaultFill: '#bada55'
},
setProjection: function(element) {
var projection = d3.geo.mercator()
.center([-120, 54])
.scale(250)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path().projection(projection);
return {path: path, projection: projection};
}
});
});
这里的工作代码 => JS FIDDLE
关于datamaps - 在单个页面中使用 Datamaps 创建加拿大和美国的 map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39744012/