Question

您好我正在尝试使用angularjs和我为实例化GMaps找到的指令开发应用程序：http://nlaplante.github.io/angular-google-maps/#!/usage。我遵循所有步骤，但我无法渲染地图！它没有返回任何错误！ HELP !!

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>

在控制器中：

angular.module('Maptesting', ['google-maps'])

.controller('CtrlGMap', ['$scope', function($scope) {
        $scope.center = {
            latitude: 45,
            longitude: -73
        };

        $scope.markers = [];
        $scope.zoom = 8;

}])

Answer 1

不同的答案，但我觉得google-maps-directive对我来说更难使用。因此，我为自己的项目创建了一个google maps angularjs directive被称为ng-map的地图。这不需要任何Javascript编码来实现简单的功能。

看起来像这样

<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>

Answer 2

我有这个问题。解决方案是确保在CSS中包含“angular-google-map-container”类的高度值。您不必将此类添加到HTML中;它已包含在angular-google-maps指令的Javascript中。 将高度添加为内联样式不起作用，因为通过在指令中进行翻译添加了此特定类。

.angular-google-maps-container {
    height: 400px;
}

Answer 3

你可以在这里查看我的答案，关于angulaJS的完整地图，

AngularJS Google Map with Multiple Markers

Answer 4

我会给角度 - 谷歌地图另外一次，因为它现在更成熟。 http://angular-google-maps.org/

Answer 5

你需要使用'refresh =“！isMapElementHidden”'?? 如果删除这些属性，它应该有效。

http://embed.plnkr.co/p9rXdx1GnmnuLKsEAMkE/preview

Answer 6

您可以查看此视频。 https://www.youtube.com/watch?v=9Zfwq_yPWDQ。这显示了如何编写指令来显示谷歌地图。

Answer 7

正如zewt112已经提到的，可以通过添加

来解决

.angular-google-map-container {
    height: 400px;
}

但请注意，在最新版本中，类名称恰好是angular-google- 地图 -container而非angular-google- 地图 -container

AngularJS谷歌地图指令

7 个答案: