0

Inkscape でマップを描画し、SVG として保存し、http: //readysetraphael.com/ を使用して Raphial に変換しました。この生成されたコードを という関数に入れ、drawMapこれを js/map.js に保存しました。

js/map.js:

function drawMap(){
 var map = Raphael('map', '100mm', '100mm');
 var layer4 = map.set();
 var path3041 = map.path("m 106.15571,153.07817 -1.64315,13.74999 4.60661,10.36488 6.04618,9.21323 9.21323,3.16705 6.04618,6.04618 8.34949,8.06157 77.4487,1.72748 3.45496,-48.79108 z");
 path3041.attr({id: 'path3041',parent: 'layer4',opacity: '0.98999999',fill: '#ffb380',stroke: '#000000',"stroke-width": '3',"stroke-linecap": 'butt',"stroke-linejoin": 'miter',"stroke-miterlimit": '4',"stroke-opacity": '1',"stroke-dasharray": 'none'}).data('id', 'path3041');
 layer4.attr({'id': 'layer4','name': 'layer4'});

 //etc, more lines than stackoverflow will let me add

var mapGroups = [layer4,layer5,layer19,layer20,layer21,layer22,layer23,layer24,layer25,layer26,layer6,layer7,layer8,layer9,layer10,layer1,layer3,layer11,layer12,layer13,layer14,layer15,layer16,layer17,layer18,layer27,layer28,layer29,layer30,layer31,layer32,layer33,layer34,layer35,layer36,layer37,layer38,layer39,layer40,layer41,layer42,layer43,layer44,layer45];
}

次にraphael-min.js、「js」フォルダーに入れます。

私がdrawMap() firebugに電話したとき、次のように言いました：

「drawMap が定義されていません」

map.js の内容を html ファイルに追加しましたが、「Raphial が定義されていません」というエラーが表示されました。

これは、raphial がraphial-min.jsロードされる前に呼び出されたためだと想定したため、Modernizer を使用してロードraphial-min.jsし、map.ja呼び出す前drawMap()に、次のエラーが発生しました。

「drawMap が定義されていません」

インデックス.html:

<!DOCTYPE html>
<html>
<head>
    <title>Risk</title>
    <script type="text/javascript" src="http://modernizr.com/downloads/modernizr.js"></script>
    </head>
    <body>
    <div id="map">
    <script type="text/javascript">
        drawMap()
        Modernizr.load({
            load: 'js/raphael-min.js',
            load: 'js/map.js',
            complete: drawMap()
        })
    </script>
    </div>
</body>
</html>
4

2 に答える 2

2

Modernizr の実装に関するいくつかの問題。

  1. プロパティでは、参照するだけcompleteで呼び出してはいけませdrawMapん。まだロードされていないため、匿名のインライン関数で参照する必要があります。
  2. drawMap()ロードする前 に呼び出してはいけません。
  3. loadModernizr.load() 構文では、javascript は同じオブジェクトで複数のプロパティを使用できません。

したがって、この：

drawMap();
Modernizr.load({
    load: 'js/raphael-min.js',
    load: 'js/map.js',
    complete: drawMap()
})

これである必要があります：

Modernizr.load({
    load: ['js/raphael-min.js', 'js/map.js'],
    complete: function() {drawMap();}
})

また、なぜこれらを動的にロードしているのかわかりません。おそらく必要ありません。あなたはこれを行うことができます：

<script src="js/raphael-min.js"></script>
<script src="js/map.js"></script>
<script>
drawMap();
</script>
于 2012-08-04T15:34:46.600 に答える
1

drawMapスクリプト ファイルがロードされる前に呼び出されています。

于 2012-08-04T15:33:26.457 に答える