javascript AngularJS 谷歌地图指令
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18885424/
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
AngularJS google maps directive
提问by Facu Ferrari
Hi i'm trying to develop an app using angularjs and a directive that I've found for instantiate GMaps: http://nlaplante.github.io/angular-google-maps/#!/usage. I follow all the steps but I cant get to render the map! it returns no errors! HELP!!
嗨，我正在尝试使用 angularjs 和我为实例化 GMap 找到的指令开发一个应用程序：http://nlaplante.github.io/angular-google-maps/#!/usage 。我按照所有步骤操作，但无法渲染地图！它不会返回任何错误！帮助！！
in the HTML
在 HTML 中
<html ng-app="Maptesting">
<google-map center="center"
zoom="zoom"
markers="markers"
refresh="!isMapElementHidden"
style="height: 400px; width: 100%; display: block;">
</google-map>
<div ng-view></div>
<script type="text/javascript" src="js/angular/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular-route.min.js"></script>
<script type="text/javascript" src="js/angular-google-maps.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>
<script src="app/map.js">
</script>
In the controller:
在控制器中：
angular.module('Maptesting', ['google-maps'])
.controller('CtrlGMap', ['$scope', function($scope) {
$scope.center = {
latitude: 45,
longitude: -73
};
$scope.markers = [];
$scope.zoom = 8;
}])
回答by allenhwkim
Different answer, but I felt google-maps-directive is harder for me to use. Thus, I have created a google maps angularjs directivecalled, ng-map for my own project. This does not require any Javascript coding for simple functionality.
不同的答案，但我觉得 google-maps-directive 对我来说更难使用。因此，我为我自己的项目创建了一个名为 ng-map的谷歌地图 angularjs 指令。这不需要任何 Javascript 编码来实现简单的功能。
it looks like this
它看起来像这样
<map zoom="11" center="[40.74, -74.18]">
<marker position="[40.74, -74.18]" />
<shape name="circle" radius="400" center="[40.74,-74.18]" radius="4000" />
<control name="overviewMap" opened="true" />
</map>
回答by zewt112
I had this problem. The solution was to ensure that in your CSS you include a height value for the 'angular-google-map-container' class. You don't have to add this class to your HTML; it is already included in the Javascript for the angular-google-maps directive. Adding the height as an inline style will not workbecause this specific class is added added through transclusion within the directive.
我有这个问题。解决方案是确保在您的 CSS 中包含“angular-google-map-container”类的高度值。您不必将此类添加到您的 HTML 中；它已经包含在 angular-google-maps 指令的 Javascript 中。添加高度作为内联样式将不起作用，因为此特定类是通过指令中的嵌入添加的。
.angular-google-maps-container {
height: 400px;
}
回答by nur farazi
you can check my answer here , a complete map on angulaJS ,
你可以在这里查看我的答案，一个关于 angulaJS 的完整地图，
回答by Nick
I'd give angular-google-maps another go as it is more mature now. http://angular-google-maps.org/
我会再试一次 angular-google-maps，因为它现在更成熟了。 http://angular-google-maps.org/
回答by Jordelca
Do you need to use refresh="!isMapElementHidden"?
It should work if you remove these property.
你需要使用refresh="!isMapElementHidden"吗？
如果您删除这些属性，它应该可以工作。
http://embed.plnkr.co/p9rXdx1GnmnuLKsEAMkE/preview
http://embed.plnkr.co/p9rXdx1GnmnuLKsEAMkE/preview
angular.js:
角度.js：
angular.module('Maptesting', ['google-maps'])
.controller('CtrlGMap', ['$scope', function($scope) {
$scope.center = {
latitude: 45,
longitude: -73
};
$scope.markers = [];
$scope.zoom = 8;
}])
index.html:
索引.html：
<html ng-app="Maptesting">
<body ng-controller="CtrlGMap">
<google-map center="center"
zoom="zoom"
markers="markers"
style="height: 400px; width: 100%; display: block;">
</google-map>
<script src="http://code.angularjs.org/1.1.5/angular.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-google-maps.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>
</script>
</body>
</html>
回答by Kamal Pandey
You can have a look at this video. https://www.youtube.com/watch?v=9Zfwq_yPWDQ. This shows how you can write directive to show google maps.
你可以看看这个视频。https://www.youtube.com/watch?v=9Zfwq_yPWDQ。这显示了如何编写指令来显示谷歌地图。
回答by Igor Loskutov
As zewt112 already mentioned, it can be resolved by adding
正如zewt112已经提到的，可以通过添加来解决
.angular-google-map-container {
height: 400px;
}
But beware that in latest version class name is exactly angular-google-map-container and not angular-google-maps-container
但要注意，在最新版本的类名是完全角google-地图-container而不是角google-地图-container
