1

我有以下生成谷歌地图实例的打字稿类。我是 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

回答：

谷歌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 地图创建了一个简短的演示应用程序：

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

目前支持：

  • 默认谷歌地图
  • SnazzyMap 支持（只需将您的 SnazzyMap 替换为我在 SnazzyMaps.ts 中配置的那个）
  • 默认中心对象
  • 免费地理 IP 位置（每小时 10.000 次请求）
  • 新的默认图标 /images/icon.png
  • 新的默认图标为 .PSD /images/icon.psd
  • 不需要 jQuery
  • 从 Json-Generator.com 生成的测试数据
  • 信息框 JS 插件
  • 信息框示例
  • 信息框的模板示例
  • 全凉亭支持

待办事项上还提供类型支持，因此您到达那里的问题不应该再次发生。

于 2016-05-30T21:28:02.113 回答