typescript 在打字稿类中创建 Google Map 实例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13458328/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating Google Map instance in typescript class
提问by Mark D
Hi I'm new to Typescript and Javascript and I'm having a few problems creating a googlemap instance.
嗨，我是 Typescript 和 Javascript 的新手，在创建 googlemap 实例时遇到了一些问题。
I've downloaded the google.maps.d.tsdeclaration file and imported it to my typescript class like so, all the intellisense works fine etc.;
我已经下载了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);
}
}
}
When I try to create this class in my index.cshtml file ;
当我尝试在我的 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>
I get the following error ;
我收到以下错误；
Microsoft JScript runtime error: Module name "google.maps" has not been loaded yet for context: _. Use require([])
Microsoft JScript 运行时错误：尚未为上下文加载模块名称“google.maps”：_。使用 require([])
What am I missing in order to load the googlemaps api?
为了加载 googlemaps api，我缺少什么？
Thanks in advance.
提前致谢。
回答by Fenton
As you are including Google Maps as a scripttag on your page, you probably don't want to use a module-loader to load it in.
当您将 Google 地图作为script标签包含在页面上时，您可能不想使用模块加载器来加载它。
So I would replace:
所以我会替换：
import googleMaps = module("google.maps");
With
和
/// <reference path="./google.maps.d.ts" />
The reference says to TypeScript "I will make sure this script is available at runtime".
该参考对 TypeScript 说“我将确保此脚本在运行时可用”。
The import statement says "Go and load this script for me at runtime".
导入语句说“在运行时为我加载这个脚本”。
回答by DominikAngerer
I liked to create something called a shimfunction which let me work with window variables/objects (like google). I created that .tsfile:
我喜欢创建一个叫做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];
}
My basic setup than looks like:
我的基本设置看起来像：
- main.ts
-- shims
-- -- Shim.ts
-- -- Google.ts
-- -- Swiper.ts
-- -- ... .ts
and the Google.ts would than simply use that function like:
并且 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');
and whereever you than want to use the google variable simply include it like:
并且无论您想在何处使用 google 变量，只需将其包含如下：
import { google } from '../shims/Google';
Maybe also have a look at the typings- Typings is the simple way to manage and install TypeScript definition - which helped me a lot.
也许还可以看看分型-分型是管理和安装打字稿定义的简单的方法-这对我帮助很大。
I currently wrote another Typescript Google Maps Setup and thought about sharing it with the community.
我目前编写了另一个 Typescript Google Maps Setup，并考虑与社区分享。
You can check it out using this link: https://github.com/DominikAngerer/typescript-google-maps
您可以使用此链接查看：https: //github.com/DominikAngerer/typescript-google-maps
