Question

我正在尝试使用Google Maps API在Angular网站中显示地图，但似乎没有正确初始化。

我的html页面使用 bootstrap nav nav-tabs ，我使用Angular控制器在它们之间切换。

<ul class="nav navbar-nav">
    <li ng-class="{ active:myCtrl.isSet('map') }">
        <a href ng-click="myCtrl.setTab('map')">Show Map</a>
    </li>
</ul>

其中一个标签只包含Google地图画布元素 - 使用角度指令设置

Module.directive('mapPage', function() {
    return {
        restrict: 'E',
        template: '<div id="map-canvas"></div>'
    };
});

在我的角度控制器中，我为窗口'load'事件设置了一个监听器来初始化地图，如下所示：

google.maps.event.addDomListener(window, 'load', myCtrl.initMap);


myCtrl.initMap = function() {

    var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(55.937879, -3.241619),
    };

    myCtrl.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(55.937879, -3.241619),
        map: myCtrl.map
    });

    myCtrl.map.setCenter(new google.maps.LatLng(55.937879, -3.241619));
}

我在屏幕上看到的是地图元素，显示的是灰色区域，位置标记未正确居中（它刚好在屏幕外）。

如果我将map-canvas div移动到index.html页面的主要部分（而不是应用程序中的子页面），它会正确加载，所以我知道我的Google API js代码和html是正确的。地图还会显示页面是否已调整大小。

在未立即呈现的页面上使用时，它不起作用。我试过搜索类似的问题/答案，但找不到这个特定的问题。

我创造了一个简单的小提琴来证明这个问题。

http://jsfiddle.net/johntough/nc0u7h2c/5/

任何帮助表示赞赏！

Google地图未在Angular指令中正确初始化

0 个答案: