在打字稿类中创建谷歌地图实例答案

【问题标题】：Creating Google Map instance in typescript class在打字稿类中创建谷歌地图实例
【发布时间】：2012-11-07 15:24:41
【问题描述】：

您好，我是 Typescript 和 Javascript 的新手，在创建 googlemap 实例时遇到了一些问题。

我已经下载了google.maps.d.ts 声明文件并将其导入到我的打字稿类中，所有的智能感知都可以正常工作等；

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，我缺少什么？

提前致谢。

【问题讨论】：

标签： google-maps typescript

【解决方案1】：

我喜欢创建一个叫做shim 的函数，它可以让我使用窗口变量/对象（如google）。我创建了 .ts 文件：

// -- Shim.ts:

/**
 * Loads variable from window according to
 * the name parameter.
 * 
 * @export
 * @param {string} name
 * @returns {*} window[name]
 */
export function shim(name: string): any {
    let global: any = window;
    return global[name];
}

我的基本设置如下：

- main.ts
-- shims
-- -- Shim.ts
-- -- Google.ts
-- -- Swiper.ts
-- -- ... .ts

而且 Google.ts 不会像这样简单地使用该功能：

// -- Google.ts

import { shim } from '../shims/Shim';

/**
 * Loads variable from window with the
 * name 'google'
 * 
 * @export
 * @returns {*} window['google']
 */
export let google = shim('google');

无论您想在哪里使用 google 变量，只需将其包括在内：

import { google } from '../shims/Google';

也许还可以看看typings - Typings 是管理和安装 TypeScript 定义的简单方法 - 这对我帮助很大。

我目前编写了另一个 Typescript Google Maps Setup，并考虑与社区分享。

您可以使用此链接查看：https://github.com/DominikAngerer/typescript-google-maps

【讨论】：

【解决方案2】：

由于您将 Google 地图作为script 标签包含在您的页面上，因此您可能不想使用模块加载器来加载它。

所以我会替换：

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

有

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

对 TypeScript 的引用说“我将确保此脚本在运行时可用”。

导入语句说“在运行时为我加载这个脚本”。

【讨论】：

谢谢史蒂夫，等我回到办公室去试试看
效果很好，感谢您的信息和解释。