Google Map-Instanz in Typoskript-Klasse erstellen

Hallo Ich bin neu in Typescript und Javascript und ich habe ein paar Probleme beim Erstellen einer Google Map-Instanz.Google Map-Instanz in Typoskript-Klasse erstellen

Ich habe die Deklarationsdatei heruntergeladen und in meine Typoskript-Klasse wie folgt importiert, alles intellisense funktioniert gut usw .;

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

Wenn ich versuche, diese Klasse in meiner index.cshtml-Datei zu erstellen;

<!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>

bekomme ich folgende Fehler;

Microsoft JScript-Laufzeitfehler: Der Modulname "google.maps" wurde noch nicht für den Kontext geladen: _. Benutze require ([])

Was fehlt mir, um googlemaps api zu laden?

Vielen Dank im Voraus.

Quelle

2012-11-19 Mark D

Wie Sie mit Google Maps als script Tag auf Ihrer Seite, werden Sie wahrscheinlich nicht wollen, ein Modul-Loader verwenden, um es in laden

Also ich würde ersetzen.

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

Mit

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

Der Verweis sagt Typoskript „ich sicher, dass das Skript zur Laufzeit zur Verfügung stellen wird.“

Die Import-Anweisung sagt "Gehe und lade dieses Skript für mich zur Laufzeit".

Quelle

2012-11-19 17:04:38 Fenton

Dank Steve, ich gehen geben werde, wenn ich wieder ins Büro –

bekommen, die großen Werke, danke für die Information und die Erklärung. –

Ich mochte es, eine so genannte shim Funktion zu erstellen, die mich mit Fenster Variablen/Objekte (wie google) arbeiten lassen. Ich habe, dass .ts Datei:

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

Meine Grundeinstellung als aussieht:

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

und die Google.ts würde, als nur diese Funktion nutzen wie:

// -- Google.ts 

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

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

und wo auch immer Sie als wollen Sie die Google-Variable verwenden einfach enthalten wie:

Vielleicht auch einen Blick auf die typings - Typings ist die einfache Möglichkeit, TypeScript-Definition zu verwalten und zu installieren - was mir sehr geholfen hat.

Ich schrieb zur Zeit ein anderes Typescript Google Maps Setup und dachte darüber nach, es mit der Community zu teilen.

Sie können es über diesen Link aus: https://github.com/DominikAngerer/typescript-google-maps

Quelle

2016-05-23 00:04:19 DominikAngerer

Google Map-Instanz in Typoskript-Klasse erstellen

Antwort

Verwandte Themen