Tworzenie instancji Google Map w klasie maszynopisu

Witam Jestem nowy w maszynie do pisania i JavaScriptu i mam kilka problemów z tworzeniem instancji googlemap.Tworzenie instancji Google Map w klasie maszynopisu

Pobrałem plik deklaracji google.maps.d.ts i zaimportowałem go do mojej klasy maszynopisu, tak jak wszystko, wszystko intellisense działa dobrze itd .;

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); 
     } 
    } 
}

Kiedy próbuję utworzyć tę klasę w moim pliku 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>

pojawia się następujący błąd;

Błąd środowiska wykonawczego Microsoft JScript: nazwa modułu "google.maps" nie została jeszcze załadowana dla kontekstu: _. Użyj wymagania ([])

Czego mi brakuje, aby wczytać interfejs API googlemaps?

Z góry dziękuję.

Źródło

2012-11-19 Mark D

Jak jesteś w tym Google Maps jako script znak na swojej stronie, to prawdopodobnie nie chcą korzystać z modułu-ładowarka, aby załadować go w

Więc chciałbym wymienić.

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

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

Odniesienie mówi maszynopis „Postaram się ten skrypt jest dostępny przy starcie”.

Instrukcja importu mówi "Idź i załaduj ten skrypt dla mnie w czasie wykonywania".

Źródło

2012-11-19 17:04:38 Fenton

Dzięki Steve, dam, że w podróży, kiedy wrócę do biura –

że działa świetnie, dzięki za informacje i wyjaśnienia. –

Lubiłem tworzyć coś, co nazywa się funkcją shim, która pozwala mi pracować ze zmiennymi/obiektami okna (takimi jak google). Stworzyłem ten .ts plik:

// -- 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]; 
}

moją podstawową konfigurację niż wygląda następująco:

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

i Google.ts niż byłoby po prostu użyć tej funkcji, takich jak:

// -- Google.ts 

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

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

i wszędzie tam niż chcesz użyć zmiennej google, po prostu umieść ją w następujący sposób:

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

Być może warto też przejrzeć typings - Typings to prosty sposób na zarządzanie i instalację definicji TypeScript - która bardzo mi pomogła.

Obecnie napisałem kolejną maszynową instalację Google Maps i pomyślałem o udostępnieniu jej społeczności.

Można to sprawdzić za pomocą tego linku: https://github.com/DominikAngerer/typescript-google-maps

Źródło

2016-05-23 00:04:19 DominikAngerer

Tworzenie instancji Google Map w klasie maszynopisu

Odpowiedz

Powiązane problemy