数据地图-加载不同国家的地图以及世界地图

Datamaps - Loading different country maps along with world map

本文关键字:地图 世界地图 国家 加载 数据      更新时间:2023-09-26

我正试图根据功能投影不同的地图。最初,我正在加载世界地图。如果用户点击"usa",我想导航到另一个页面,并显示"usa"地图。如果用户点击"RUS",我想展示"RUS"地图。

我面临的问题是,当我包括"datamaps.world.js"answers"datamaps.usa.js",我得到一个错误说,

datamaps-all.js:1 Uncaught TypeError: Cannot read property 'world' of undefined

这是因为我试图加载两个数据地图。World and datamp .usa。或者其他任何国家。

是否有解决这个问题的方法?

我使用Jade作为模板系统,

script(src="/javascripts/d3.v3.min.js")
script(src="/javascripts/topojson.v1.min.js")
script(src="/javascripts/d3-queue.v3.min.js")
script(src="/javascripts/datamaps-usa.js")
script(src="/javascripts/datamaps.world.mod.js")
script(src="/javascripts/datamaps-all.js")

我尝试了下面的脚本动态加载不同的Javascript在每个页面加载,但它不工作。

script.
    if ((window.location.href).indexOf("country=USA") <= -1) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "/javascript/datamaps-usa.js";
    } else {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "/javascript/datamaps-world.js";
    }

Datamaps声明:

var map = new Datamap({
    scope: 'world',
    element: document.getElementById('canvas'),
    projection: 'mercator',
    height:900,
    width:null,
    responsive: true,
    geographyConfig: {
        hideAntarctica: true,
        hideHawaiiAndAlaska : false,
        borderWidth: 1.5,
        borderOpacity: 0,
        borderColor: '#ffffff'
    }, .... [truncated]

我计划向所有国家宣传。我想知道如何做到这一点?请求社区帮助。

谢谢。

是的,我找到了一个解决这个问题的方法。它只是单独保存两个文件,并在需要时加载。

在这里写了一个详细的解释。https://sketchingjournal.blogspot.com/2016/09/datamaps-dynamically-loading-map-based.html