Angularjs 谷歌地图赢得'；我什么也没表现出来
根据我收集的信息，下面的代码是运行谷歌地图的最低要求，但它不会在屏幕上显示地图。看看Chrome中的#我的地图组件，它显示了0x0px，尽管有css和动态高度声明，我仍然无法更改它。除此之外，它似乎运行良好，没有控制台错误，appMaps模块至少已正确初始化Angularjs 谷歌地图赢得'；我什么也没表现出来,angularjs,angular-google-maps,Angularjs,Angular Google Maps,根据我收集的信息，下面的代码是运行谷歌地图的最低要求，但它不会在屏幕上显示地图。看看Chrome中的#我的地图组件，它显示了0x0px，尽管有css和动态高度声明，我仍然无法更改它。除此之外，它似乎运行良好，没有控制台错误，appMaps模块至少已正确初始化 <!DOCTYPE html> html> <head> <title>New Map</title> <style> html, body
<!DOCTYPE html>
html>
<head>
<title>New Map</title>
<style>
html, body {
height: 2000px;
width: 100%;
margin: 0;
padding: 0;
}
.angular-google-map-container { height: 400px; }
</style>
<script src="lodash/lodash.js"></script>
<script src="angular/angular.js"></script>
<script src="angular-google-maps/dist/angular-google-maps.js"></script>
<script>
var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']);
appMaps.config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: 'My Key Is Entered Here',
v: '3.20',
libraries: 'weather,geometry,visualization'
});
});
appMaps.controller('mainCtrl', function($scope) {
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
$scope.$on('$viewContentLoaded', function () {
var mapHeight = 400; // or any other calculated value
$("#my-map .angular-google-map-container").height(mapHeight);
});
});
</script>
</head>
<body>
<h1>TEST</h1>
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map id="my-map" center="map.center" zoom="map.zoom"></ui-gmap-google-map>
</div>
</body>
</html>
html>
新地图
html，正文{
高度：2000px；
宽度：100%；
保证金：0；
填充：0；
}
.google地图容器{高度：400px；}
var appMaps=angular.module（'appMaps'，['uiGmapgoogle-maps']）；
appMaps.config（函数（uiGmapGoogleMapApiProvider）{
uiGmapGoogleMapApiProvider.configure({
钥匙：“我的钥匙在这里输入”，
v:‘3.20’，
库：“天气、几何、可视化”
});
});
appMaps.controller（'mainCtrl'，函数（$scope）{
$scope.map={中心：{纬度：45，经度：-73}，缩放：8}；
$scope.$on（“$viewContentLoaded”，函数（）{
var mapHeight=400；//或任何其他计算值
$（“#我的地图.角度谷歌地图容器”）.height（地图高度）；
});
});
试验
- 在项目中添加angular-simple-logger.js（我认为它附带了angular用户界面包或angular谷歌地图）
- 别忘了添加GoogleAPI，没有它，什么都不会起作用<代码>