Question

我有以下产生谷歌地图实例的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>

我在运行时获得的只是一个灰色框，在此框内拖动会将指针更改为指针，因此看起来控件已创建好，只是没有显示任何地图细节。

有人有任何想法吗？

提前致谢。

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

Answer 2

<强>答案：

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中为TypeScript应用程序/页面中的Google地图创建了一个简短的演示应用程序：

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

目前支持：

默认Google地图
SnazzyMap支持（只需用我在SnazzyMaps.ts中配置的SnazzyMap替换你的SnazzyMap）
默认中心对象
免费地理IP位置（每小时10.000请求）
新默认图标/images/icon.png
新默认图标为.PSD /images/icon.psd
不需要jQuery
Json-Generator.com生成的测试数据
InfoBox JS插件
信息框示例
InfoBoxes的模板示例
全范围支持

关于todo也是打字支持，所以问题就在你到达那里不应该再发生。

从typecript / javascript生成的Google Map显示为灰色框

2 个答案: