1

機能に基づいてさまざまなマップを投影しようとしています。最初に、世界地図をロードしています。ユーザーが「usa」をクリックすると、別のページに移動して「USA」マップを表示したいと考えています。ユーザーが「RUS」をクリックすると、「RUS」マップを表示したいと考えています。

私が直面している問題は、「datamaps.world.js」と「datamaps.usa.js」を含めると、次のようなエラーが表示されることです。

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

これは、datamaps.world と datamps.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";
    }

データマップ宣言:

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]

私はすべての国を投影する予定です。これを達成する方法を知りたいですか?コミュニティの助けを求めています。

ありがとう。

4

1 に答える 1