AngularJS 谷歌地图指令
Posted
技术标签:
【中文标题】AngularJS 谷歌地图指令【英文标题】:AngularJS google maps directive 【发布时间】: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 【参考方案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>
【讨论】:
如何动态改变中心 @AshishNautiyalcenter="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,你不应该添加这样的类。相反,使用您可以观看此视频。 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>
【讨论】:
以上是关于AngularJS 谷歌地图指令的主要内容,如果未能解决你的问题,请参考以下文章
angularJS 使用 Angular 谷歌地图查找位置/地名
AngularJS谷歌地图点击事件不在ios设备ipad和iphone中触发
听一个复选框并在谷歌地图上显示/隐藏圆形(AngularJS)