ng-map关于ng-material布局
我正在尝试使用angular material desgin创建一个包含两列的布局：
<div layout="row">
<div flex="33">
123
</div>
<div flex="77">
456
</div>
</div>没问题。但是如果我放置一个ng-map元素：
<div layout="row">
<div flex="33">
123
</div>
<div flex="77">
<ng-map ></ng-map>
</div>
</div>是垂直堆叠的。为什么？
回答 3
Stack Overflow用户
发布于 2017-03-01 14:34:48
查看console，，您可以看到以下错误：
TypeError：
$element.bind不是new __MapController的函数(ng-map.js:318)
flex属性应用样式如下的CSS类：
./angular-material.min.css
.layout-row>.flex-66 {
-webkit-box-flex: 1;
-webkit-flex: 1 1 66.66%;
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box
}然后是一些其他的风格，但这些都是flexgrid的责任。如果您在<ng-map>的父级上手动应用样式，它们确实可以工作。
<ng-map>中提到的错误在某个时刻停止脚本执行，很快就无法在包装<div>上应用预期的.flex-*类形式./angular-material.min.css。
考虑一下opening new issue (我检查过了，现在还没有)，或者只是使用不同的地图插件。
Stack Overflow用户
发布于 2017-03-01 12:43:38
在检查元素时，我看到ng-map标记自动从google apis加载一些样式，覆盖了flex/angular样式。
我在这里写了一个解决方案：https://plnkr.co/edit/GHYZoC5BotyD58RG0Qdj?p=preview
我查看了Angular的布局文档，我认为没有什么好方法可以覆盖自动加载的ng-map的css样式。
因此，我选择简单地使用一些自定义的css，它使用浮动来定位两个元素：
.first {
height: 250px;
width: 250px;
position: relative;
float: left;
}
.map {
height: 250px;
width: 250px;
position: relative;
float: right;
}
.container {
width: 500px;
margin-right: auto;
margin-left: auto;
height: auto;
}HTML：
<body ng-controller="ctrl">
<div class="container">
<div class="first">Hello</div>
<ng-map class="map"></ng-map>
</div>
</body>Stack Overflow用户
发布于 2017-03-02 16:19:37
不包括引导样式表
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="//maps.google.com/maps/api/js"></script>
<script src="//rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="ctrl">
<div layout="row" style="display: flex;">
<div flex="33" style="width: 33%">
123
</div>
<div flex="77" style="width: 77%">
<ng-map ></ng-map>
</div>
</div>
</body>
</html>https://stackoverflow.com/questions/42427937
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号