1

Google マップ インスタンスを生成する次の typescript クラスがあります。私はjavascript / typescriptとHTMLが初めてです！

/// <reference path="./google.maps.d.ts" />
module Mapping {
    export class GoogleMap implements IMap {

        public name: string;
        private map: any;
        private options: any;

        constructor (mapDiv: Element) {
            this.name = "GoogleMap";
            this.options = {center: new google.maps.LatLng(53.83305, -1.66412), zoom: 3, MapTypeId: 'terrian' };
            this.map = new google.maps.Map(mapDiv, this.options);
        }
    }
}

そして私の見解では、私は次のことを持っています。

<!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");
                Mapping.GoogleMap(mapCanvas);
            }
        </script>
    <body onload="initialize()">
    <div id="map" style="height: 512px; width: 512px;"></div>
  </body>
</html>

実行時に表示されるのは灰色のボックスだけです。このボックス内をドラッグすると、ポインタがハンド ポインタに変わります。マップの詳細が表示されないだけで、コントロールが正常に作成されたように見えます。

誰かアイデアはありますか？

前もって感謝します。

4

2 に答える 2

1

コメントからの発見をエコーするだけです：

マップ オプションが正しく定義されていないようです。試す...

constructor (mapDiv: Element) {
    this.name = "GoogleMap";
    this.options = {
        center: new google.maps.LatLng(53.83305, -1.66412),
        zoom: 3,
        MapTypeId: google.maps.MapTypeId.TERRAIN
    };
    this.map = new google.maps.Map(mapDiv, this.options);
}
于 2012-11-20T16:06:59.653 に答える
0

答え：

Google のMapTypeIdは定数であるため、次のようにプロパティに直接アクセスできます。

google.maps.MapTypeId.CONSTANT

現在、4 つのタイプをサポートしています。

Constant    - Description
HYBRID      - Displays a photographic map + roads and city names
ROADMAP     - Displays a normal, default 2D map
SATELLITE   - Displays a photographic map
TERRAIN     - Displays a map with mountains, rivers, etc.

アドオン：

TypeScript アプリケーション/ページの Google マップ用に、TypeScript で短いデモ アプリケーションを作成しました。

https://github.com/DominikAngerer/typescript-google-maps

現在、以下をサポートしています。

  • デフォルトの Google マップ
  • SnazzyMap のサポート (SnazzyMap を SnazzyMaps.ts で構成したものに置き換えるだけです)
  • デフォルトの中心オブジェクト
  • 無料の地域 IP ロケーション (1 時間あたり 10.000 リクエスト)
  • 新しいデフォルト アイコン /images/icon.png
  • .PSD /images/icon.psd としての新しいデフォルト アイコン
  • jQuery は不要
  • Json-Generator.com から生成されたテスト データ
  • InfoBox JS プラグイン
  • インフォボックスの例
  • InfoBox のテンプレート例
  • バウアーのフルサポート

Todo ではタイピングもサポートされているため、問題が発生することはありません。

于 2016-05-30T21:28:02.113 に答える