javascript Angular 谷歌地图不显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31554121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Google Maps does not Display
提问by Diesel
I have Angular Google Maps working it appears, but the map does not show on my website. My JS loads the maps, I can print out the map properties. Most importantly, when I go to my Chrome AngularJS Debugger, I can see a picture of the map living in my scope, but it doesn't show on my page. On Google's API page, I can see requests are being made. So what am I doing wrong to cause it to not actually display this map? The view is being imported via the ng-view directive with ng-routes.
我有 Angular Google Maps 工作它出现，但地图没有显示在我的网站上。我的 JS 加载地图，我可以打印出地图属性。最重要的是，当我转到 Chrome AngularJS 调试器时，我可以看到位于我的范围内的地图图片，但它没有显示在我的页面上。在 Google 的 API 页面上，我可以看到正在发出请求。那么我做错了什么导致它实际上不显示这张地图？该视图是通过带有 ng-routes 的 ng-view 指令导入的。
Thank you for any help!
感谢您的任何帮助！
Angular:
角度：
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};
})
}])
Relevant HTML:
相关 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
CSS
.angular-google-map-container {
height: 300px;
}
.angular-google-map {
height: 300px;
}
Edit: Included my CSS import. It appears that my CSS in my project is not loading properly. Inspecting the element shows a zero height. If I click on the element, it does not show my .css though it is imported. I reproduced the code on fiddle and it works, but if I delete the css section, I get similar behavior. If I run the code in liveEdit with PyCharm it gives me the issue, but if I modify the .css file while it's open in PyCharm, the map pops up! Refresh - it's gone.
编辑：包括我的 CSS 导入。我的项目中的 CSS 似乎没有正确加载。检查元素显示零高度。如果我单击该元素，虽然它已导入，但它不会显示我的 .css。我在 fiddle 上复制了代码并且它有效，但是如果我删除 css 部分，我会得到类似的行为。如果我使用 PyCharm 在 liveEdit 中运行代码，它会给我带来问题，但是如果我在 PyCharm 中打开 .css 文件时修改它，地图会弹出！刷新 - 它消失了。
Before live-edit, the .angular-google-map css style in the developer pane of Chrome is not there where it lists all the styles for an element. Then I modify the .css file with liveEdit and the map displays and the styles change to .angular-google-map from viewtrips.css line 7. Why is it not loading the styles properly on first load?:
在实时编辑之前，Chrome 开发人员窗格中的 .angular-google-map css 样式不存在其中列出元素的所有样式。然后我使用 liveEdit 修改 .css 文件，地图显示和样式从 viewtrips.css 第 7 行更改为 .angular-google-map。为什么在第一次加载时没有正确加载样式？：
回答by Diesel
If your map is not displaying - check if its height is zero in some debugger by inspecting the element. If it is zero, your CSS is most likely not being imported properly.
如果您的地图未显示 - 通过检查元素在某些调试器中检查其高度是否为零。如果它为零，则您的 CSS 很可能没有正确导入。
My .css was being re-routed to a separate URL by the back end. Solved by modifying back-end, but the generic answer is with no height set it defaults to zero so the most likely problem to look at is your .css file or the import.
我的 .css 被后端重新路由到一个单独的 URL。通过修改后端解决，但通用答案是没有高度设置它默认为零，所以最有可能查看的问题是您的 .css 文件或导入。
回答by nebulr
You might want to check your css. Its actually pretty hard to get it fit the screen. This worked for me :
您可能想检查一下您的 css。实际上很难让它适合屏幕。这对我有用：
I had a nav bar that had 4em height and a sub nav bar with 64px height
我有一个高度为 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;
}
with html
与 html
<div class="map-wrapper">
<ui-gmap-google-map>
...
</ui-gmap-google-map>
</div>
回答by jprism
This is the problem because og height is 0 or auto. Set height for agm-map will solve
这是问题所在，因为 og height 是 0 或 auto。为 agm-map 设置高度将解决
agm-map{
height: 500px
}
