Tạo bản đồ Google Map trong lớp số

Xin chào, tôi mới sử dụng Typecript và Javascript và tôi đang gặp một số sự cố khi tạo một phiên bản googlemap.Tạo bản đồ Google Map trong lớp số

Tôi đã tải xuống tệp kê khai google.maps.d.ts và nhập tệp đó vào lớp bản ghi của tôi như vậy, tất cả các tác phẩm intellisense đều tốt, v.v.;

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

Khi tôi cố gắng tạo lớp này trong tệp index.cshtml của mình;

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

tôi nhận được lỗi sau;

Lỗi thời gian chạy Microsoft JScript: Tên mô-đun "google.maps" chưa được tải cho ngữ cảnh: _. Sử dụng yêu cầu ([])

Tôi thiếu gì để tải api googlemaps?

Xin cảm ơn trước.

Nguồn

2012-11-19 Mark D

Như bạn đã bao gồm Google Maps như một thẻ script trên trang của bạn, có thể bạn không muốn sử dụng một mô-đun-loader để tải nó trong

Vì vậy, tôi sẽ thay thế:.

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

Với

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

Tham chiếu nói với TypeScript "Tôi sẽ đảm bảo tập lệnh này có sẵn khi chạy".

Tuyên bố nhập khẩu cho biết "Hãy tải và tải tập lệnh này cho tôi khi chạy".

Nguồn

2012-11-19 17:04:38 Fenton

Cảm ơn Steve, tôi sẽ cho rằng một đi khi tôi nhận được trở lại văn phòng –

rằng hoạt động tuyệt vời, nhờ những thông tin và lời giải thích. –

tôi thích để tạo ra một cái gì đó gọi là một hàm shim mà hãy để tôi làm việc với các biến cửa sổ/đối tượng (như google). Tôi tạo ra rằng .ts file:

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

thiết lập cơ bản của tôi hơn trông giống như:

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

và Google.ts sẽ chỉ đơn giản là sử dụng chức năng như:

// -- Google.ts 

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

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

và bất cứ nơi nào bạn hơn là muốn sử dụng biến google chỉ cần bao gồm biến này như:

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

Cũng có thể có một cái nhìn tại typings - Kiểu chữ là cách đơn giản để quản lý và cài đặt định nghĩa TypeScript - đã giúp tôi rất nhiều.

Tôi hiện đang viết một Thiết lập Bản đồ Google Maps khác và nghĩ về việc chia sẻ nó với cộng đồng.

Bạn có thể kiểm tra xem nó ra sử dụng liên kết này: https://github.com/DominikAngerer/typescript-google-maps

Nguồn

2016-05-23 00:04:19 DominikAngerer

Tạo bản đồ Google Map trong lớp số

Trả lời

Các vấn đề liên quan