Создание экземпляра Google Map в классе 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);
         }
    }
}

Когда я пытаюсь создать этот класс в файле 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?

Спасибо заранее.

Ответ 1

Поскольку вы включаете Google Maps в качестве тега script на своей странице, вы, вероятно, не хотите использовать загрузчик модуля для загрузки.

Итак, я бы заменил:

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

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

Ссылка на TypeScript "Я убеждаюсь, что этот script доступен во время выполнения".

В заявлении import говорится: "Идите и загрузите этот script для меня во время выполнения".

Ответ 2

Мне понравилось создавать что-то, называемое функцией 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 - Типизация - это простой способ управления и установки определения TypeScript - что помогло мне много.

В настоящее время я написал еще одну TypeScript программу Google Maps и подумал о том, чтобы поделиться ею с сообществом.

Вы можете проверить это, используя эту ссылку: https://github.com/DominikAngerer/typescript-google-maps