10

こんにちは、私は Typescript と Javascript が初めてで、googlemap インスタンスの作成にいくつか問題があります。

google.maps.d.ts宣言ファイルをダウンロードし、typescript クラスにインポートしました。すべてのインテリセンスは正常に動作します。

import googleMaps = module("google.maps"); 
module Mapping {
    export class GoogleMap implements IMap {

        public name: string;
        private map: any;
        private options: any;

        constructor (mapDiv:Element) {
            this.name = "GoogleMap";
            this.options = { zoom: 3, MapTypeId: 'terrian' };
            this.map = new googleMaps.google.maps.Map(mapDiv, this.options);
         }
    }
}

index.cshtml ファイルでこのクラスを作成しようとすると、

<!DOCTYPE html>
<html>
    <head><title>TypeScript Mapping</title></head>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?    key=MYKEYGOESHERE&sensor=false"></script>
    <script type="text/javascript" src="~/scripts/require.js"></script>
    <script type="text/javascript" src="~/typings/Mapping.js"></script>
    <script type="text/javascript">
        function initialize() {

            var mapCanvas = document.getElementById("map");

            var googleMap = new Mapping.GoogleMap(mapCanvas);
        }
    </script>
<body onload="initialize()">
<div id="map" style="height: 512px; width: 512px;"></div>

次のエラーが表示されます。

Microsoft JScript ランタイム エラー: モジュール名 "google.maps" は、コンテキストに対してまだ読み込まれていません: _. require([]) を使用する

googlemaps API をロードするために何が欠けていますか?

前もって感謝します。

4

2 に答える 2

13

ページにタグとして Google マップを含めているためscript、おそらくモジュールローダーを使用してそれをロードしたくないでしょう。

だから私は置き換えます：

import googleMaps = module("google.maps");

と

/// <reference path="./google.maps.d.ts" />

TypeScript への参照には、「このスクリプトが実行時に利用可能であることを確認します」と記載されています。

import ステートメントには、「実行時にこのスクリプトをロードしてください」と書かれています。

于 2012-11-19T17:04:38.633 に答える