文章/答案/技术大牛

发布

社区首页 >问答首页 >在typescript类中创建Google Map实例

问在typescript类中创建Google Map实例
EN

Stack Overflow用户

提问于 2012-11-20 00:45:25

回答 2查看 11.2K关注 0票数 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运行时错误:尚未为context：_加载模块名称"google.maps“。使用require([])

为了加载googlemaps api，我遗漏了什么？

提前谢谢。

google-maps

typescript

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-11-20 01:04:39

当您将Google Maps作为script标记包含在页面上时，您可能不希望使用模块加载器来加载它。

因此，我将替换：

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

使用

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

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

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

票数 13

Stack Overflow用户

发布于 2016-05-23 08:04:19

我喜欢创建一个叫做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定义的简单方法--这对我帮助很大。

我最近写了另一个Google Maps Setup的Typescript，并考虑将其与社区分享。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13458328

复制

相似问题

问在typescript类中创建Google Map实例
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在typescript类中创建Google Map实例EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在typescript类中创建Google Map实例
EN