クイックスタート

全て展開

すべて折りたたむ

このクイックスタートでは、HTML マークアップおよび jQuery スクリプトを使用して、wijmaps ウィジェットを HTML プロジェクトに追加する方法を学習します。

テキストエディタで新規の HTML ページを作成するには、下記コードを追加して文章を .html の拡張子で保存します。
ドロップダウンしてマークアップをコピーします
テキストエディタに張り付けます
コードのコピー

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

テキストエディタに張り付けます	コードのコピー
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、「at wijmo cdn」のコンテンツ配信ネットワーク（CDN）ファイルを参照してください。

ドロップダウンして参照コードをコピーし、head タグ内に貼り付けます。

<body> タグ内に次のマークアップを追加して、ウィジェットを作成します。<div> 要素によってウィジェットが作成され、高さが 400pxに、幅が 600px にそれぞれ設定されます。
ドロップダウンしてマークアップをコピーし、body タグ内に貼り付けます。
マークアップ
コードのコピー

<div id="maps" style="width: 600px; height: 400px;"> </div>

参照	コードのコピー
<!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--RequireJs--> <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script> <script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min" } }); </script>

マークアップ	コードのコピー
<div id="maps" style="width: 600px; height: 400px;"> </div>

<head> タグ内の参照の後に、次のスクリプトを追加します。このスクリプトはウィジェットを初期化し、ソース、中心座標、およびズームレベルを設定します。

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijmaps"], function () { $(document).ready(function () { $("#maps").wijmaps({ source: "bingMapsAerialSource", center: { x: -80.08, y: 42.12 }, zoom: 3 }) }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijmaps"], function () {
        $(document).ready(function () {          
            $("#maps").wijmaps({     
           source: "bingMapsAerialSource",
            center: { x:  -80.08, y: 42.12 },
            zoom: 3                                      
               })
            });
        });
</script>

関連トピック

参照