AngularJS谷歌地图指令

AngularJS google maps directive

本文关键字：指令 谷歌地图 AngularJS      更新时间：2023-09-26

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

在 HTML 中

<html ng-app="Maptesting">

<div ng-view></div>

<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;
}])

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

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

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

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

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

但请注意，在最新版本中，类名完全是角度谷歌地图容器，而不是角度谷歌地图容器

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

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

棱角.js： 

angular.module('Maptesting', ['google-maps'])
.controller('CtrlGMap', ['$scope', function($scope) {
        $scope.center = {
            latitude: 45,
            longitude: -73
        };
        $scope.markers = [];
        $scope.zoom = 8;
}])

索引.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>
相关文章：