在typescript类中创建Google Map实例

Mar*_*k D 10 google-maps typescript

嗨,我是Typescript和Javascript的新手,我在创建googlemap实例时遇到了一些问题.

我已经下载了google.maps.d.ts声明文件,并将其导入我的typescript类,就像这样,所有intellisense工作正常等等;

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);
         }
    }
}
Run Code Online (Sandbox Code Playgroud)

当我尝试在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>
Run Code Online (Sandbox Code Playgroud)

我收到以下错误;

Microsoft JScript运行时错误:尚未为上下文加载模块名称"google.maps":_.使用require([])

加载googlemaps api我错过了什么?

提前致谢.

Fen*_*ton 13

由于您将Google地图作为script标记添加到页面上,因此您可能不希望使用模块加载程序来加载它.

所以我会替换:

import googleMaps = module("google.maps"); 
Run Code Online (Sandbox Code Playgroud)

/// <reference path="./google.maps.d.ts" />
Run Code Online (Sandbox Code Playgroud)

引用对TypeScript说"我将确保此脚本在运行时可用".

import语句说"在运行时为我运行并加载此脚本".