Angular Google 地图 ui-gmap-google-map 不加载地图

Question

我有简单的方案，但仍然不起作用..：

index.html

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="utf-8">
    <title>app</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <!-- Custom-->
    <link rel="stylesheet" href="/css/style.css">
    <script type="text/javascript" src="/js/lodash.js"></script>
    <script type="text/javascript" src="/js/angular.js"></script>
    <script type="text/javascript" src="/js/angular-simple-logger.js"></script>
    <script type="text/javascript" src="/js/angular-google-maps.js"></script>
    <script type="text/javascript" src="/js/angular-google-maps-street-view.js"></script>


    <script type="text/javascript" src="/js/app/app.js"></script>

    <!-- Controllers -->
    <script type="text/javascript" src="/js/app/controllers/MainController.js"></script>

</head>
<body ng-controller="MainController">

<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>

</body>
</html>

app.js

var myapp = angular.module('myapp', ['uiGmapgoogle-maps']);

myapp.config(function (uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        key: 'MY_API_KEY',
        // v: '3.28',
        libraries: 'weather,geometry,visualization'
    });
});

MainController.js

myapp.controller("MainController",function ($scope,uiGmapGoogleMapApi) {

    uiGmapGoogleMapApi.then(function (maps) {
        $scope.maps = maps;
        $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 10 };
    });

});

style.css

ui-gmap-google-map{
    border: 1px dashed darkred;
    width: 500px;
    height: 300px;
    display: inline-block;
}

.angular-google-map-container {
    width: 400px;
    height: 400px;
}

控制台中没有错误。 css 应用正常，控制器中的承诺工作正常但没有显示地图。

DOM 一直这样的事实让我很困扰：

<ui-gmap-google-map center="map.center" zoom="map.zoom"></ui-gmap-google-map>

因为在示例网站上我看到 angular 正在这样改变它 :

<ui-gmap-google-map center="map.center" zoom="map.zoom" class="ng-isolate-scope"><div class="angular-google-map"><div class="angular-google-map-container">
</div><div ng-transclude="" style="display: none"></div></div></ui-gmap-google-map>

（或类似的东西）

知道我做错了什么吗？

Answer 1

由于您的地图正在 promise 中加载，请尝试使用 ng-if 有条件地渲染它（按照指定 here）：

<ui-gmap-google-map ng-if='map.center' 
                   center='map.center' 
                   zoom='map.zoom'>
</ui-gmap-google-map>

工作演示here。

Answer 2

我发现了问题所在，因为我也包含了

<script type="text/javascript" src="/js/angular-google-maps-street-view.js"></script>

删除后一切正常。

Angular Google 地图 ui-gmap-google-map 不加载地图

Angular Google Maps ui-gmap-google-map doesn't load the map

angularjs

google-maps

angular-google-maps