Angular Google地图无法显示

Question

我有Angular谷歌地图工作,但我的网站上没有显示地图.我的JS加载地图,我可以打印出地图属性.最重要的是,当我访问我的Chrome AngularJS调试器时,我可以看到生活在我的范围内的地图图片,但它没有显示在我的页面上.在Google的API页面上,我可以看到正在发出请求.那么我做错了什么导致它实际上没有显示这张地图？该视图通过带有ng-routes的ng-view指令导入.

感谢您的任何帮助!

角度:

    uiGmapGoogleMapApiProvider.configure({
        key: 'MY_KEY',
        v: '3.17',
        libraries: 'weather,geometry,visualization'
    })

tripApp.controller('TripsController', ['$scope', 'uiGmapGoogleMapApi',
    function ($scope, uiGmapGoogleMapApi) {

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

相关HTML:

<script src="./assets/js/angular-google-maps.js"></script>
<script src="./assets/js/lodash.js"></script>
<link rel="stylesheet" type="text/css" href="/app/trips/viewtrips.css">

<div ng-controller="TripsController as tripCtrl">

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

</div>

CSS

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

编辑:包括我的CSS导入.看来我的项目中的CSS没有正确加载.检查元素显示零高度.如果我单击该元素,虽然它已导入,但它不会显示我的.css.我在小提琴上复制了代码并且它有效,但是如果我删除了css部分,我会得到类似的行为.如果我使用PyCharm在liveEdit中运行代码,它会给我一个问题,但如果我在PyCharm中打开它时修改.css文件,地图会弹出!刷新 - 它消失了.

在实时编辑之前,Chrome的开发人员窗格中的.angular-google-map css样式不在其中列出元素的所有样式.然后我用liveEdit修改.css文件并显示地图,样式从viewtrips.css第7行更改为.angular-google-map.为什么在第一次加载时没有正确加载样式？:

小提琴:https://jsfiddle.net/diesel555/z12k2djv/2/

Answer 1

如果您的地图未显示 - 请检查元素,检查某些调试器中的高度是否为零.如果它为零,则很可能无法正确导入CSS.

我的.css被后端重新路由到一个单独的URL.通过修改后端解决,但通用答案是没有高度设置它默认为零,所以最可能的问题是你的.css文件或导入.

Answer 2

您可能想检查一下您的 css。实际上很难让它适合屏幕。这对我有用：

我有一个高度为 4em 的导航栏和一个高度为 64px 的子导航栏

.map-wrapper {
    position: relative;
    height: calc(100vh - 4em - 64px);
}

.angular-google-map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

带 html

<div class="map-wrapper">
    <ui-gmap-google-map>
    ...
    </ui-gmap-google-map>
</div>