角度谷歌地图不显示

我有角谷歌地图工作它似乎，但地图不显示在我的网站上。我的JS加载地图，我可以打印出地图属性。最重要的是，当我使用我的Chrome AngularJS调试器时，我可以看到地图上的图片居住在我的范围内，但它并未显示在我的页面上。在Google的API页面上，我可以看到正在提出请求。那么，我做错了什么导致它没有实际显示这张地图呢？该视图正在通过ng-routes通过ng-view指令导入。角度谷歌地图不显示

谢谢你的帮助！

Image of developer pane

角：

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：

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/

来源

2015-07-22 Diesel

嘿柴油导航栏。我从来没有使用过Angular谷歌地图，但我已经使用了[Google Maps API]（https://developers.google.com/maps/）和Angular，并且从来没有遇到任何问题。这是非常容易使用和开始。单独使用Google Maps API可获得更多资源和信息。如果你已经写了很多代码，那么我希望有人帮助你解决你的问题！ –

注意：Google Maps API版本3.17已经停用。它不应该导致你任何问题，你会得到v3.19（最旧的可用版本）。请参阅https://developers.google.com/maps/documentation/javascript/basics#VersionDocs – duncan

我在代码中看不到任何错误。我也在使用Angular Google Maps。尝试为.angular-google-map-container和包装div设置背景颜色。不显示任何东西吗？ – BastianW

如果你的地图没有显示 - 通过检查元素来检查它的高度在某个调试器中是否为零。如果它为零，那么你的CSS很可能没有被正确导入。

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

来源

2015-07-22 15:33:08 Diesel

你可能想检查你的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>

来源

2016-11-04 15:34:40 nebulr

角度谷歌地图不显示

回答

相关问题