機能に基づいてさまざまなマップを投影しようとしています。最初に、世界地図をロードしています。ユーザーが「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]
私はすべての国を投影する予定です。これを達成する方法を知りたいですか?コミュニティの助けを求めています。
ありがとう。