AngularJS 谷歌地图指令答案

【问题标题】：AngularJS google maps directiveAngularJS 谷歌地图指令
【发布时间】：2013-09-23 23:47:50
【问题描述】：

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

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

}])

【问题讨论】：

你在加载 lodash.underscore.js 吗？看来您需要该脚本，但如果您没有它应该会引发错误。 info here

标签： javascript angularjs google-maps google-maps-api-3 angularjs-google-maps

【解决方案1】：

不同的答案，但我觉得 google-maps-directive 对我来说更难使用。因此，我为我自己的项目创建了一个名为 ng-map 的google maps angularjs directive。这不需要任何 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>

【讨论】：

如何动态改变中心
@AshishNautiyal center="{{dynamicCenter}}" 可以做

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

AngularJS Google Map with Multiple Markers

【讨论】：

【解决方案4】：

我会再试一次 angular-google-maps，因为它现在更成熟了。 http://angular-google-maps.org/

【讨论】：

嗨，我使用的是最新版本，我的控制台没有任何错误，但我没有看到地图，我的意思是
为空。你知道为什么吗？
@fab，你不应该添加这样的类。相反，使用然后添加 .angular-google- maps-container{height:whatever px;} 在你的 CSS 中

【解决方案5】：

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

【讨论】：

【解决方案6】：

前面已经提到zewt112，可以通过添加解决

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

但请注意，在最新版本中，类名完全是 angular-google-map-container 而不是 angular-google-maps-container

【讨论】：

【解决方案7】：

你需要使用refresh="!isMapElementHidden"吗？
如果您删除这些属性，它应该可以工作。

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

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

【讨论】：