文章/答案/技术大牛

发布

社区首页 >问答首页 >从typescript / javascript生成的Google地图显示为灰色方框

问从typescript / javascript生成的Google地图显示为灰色方框
EN

Stack Overflow用户

提问于 2012-11-20 21:47:30

回答 2查看 1.4K关注 0票数 1

我有下面的typescript类，它生成一个google地图实例。我是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>

我在运行时得到的只是一个灰色的方框，拖动到这个方框内会改变指针指向手形指针，这样看起来就像控件已经创建好了，只是不会显示任何地图细节。

有人有什么想法吗？

提前谢谢。

javascript

google-maps

typescript

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-11-21 00:07:00

仅从评论中呼应这一发现：

看起来您的地图选项定义不正确。试试..。

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

票数 1

Stack Overflow用户

发布于 2016-05-31 05:28:02

答案：

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

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

它目前支持：

Maps

SnazzyMap默认谷歌SnazzyMaps.ts)

Default支持(只需将您的/images/icon.png

New替换为我在/images/icon.psd

No Needed

Generated Object

SnazzyMap

免费地理IP位置(每小时10.000个请求)中配置的图标)

新的默认图标InfoBoxes

Full
默认图标来自Json-Generator.com
InfoBox JS Plugin
Infobox Example
Template的.PSD jQuery

测试数据示例

InfoBoxes

Full bower support

todo上也有类型支持，所以你遇到的问题不应该再发生了。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13474632

复制

相似问题

问从typescript / javascript生成的Google地图显示为灰色方框
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从typescript / javascript生成的Google地图显示为灰色方框EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从typescript / javascript生成的Google地图显示为灰色方框
EN