标签: angularjs-google-maps

我是AngularJS的新手,我正在尝试使用https://github.com/angular-ui/angular-google-maps.

我只是想让我的页面上的地图呈现,但我收到一条错误消息,我不知道这意味着什么.任何帮助理解此错误消息将不胜感激.

我在这里创建了一个插件:

github.com/twdean/plunk

这是浏览器中的错误:

Error: [$compile:multidir] Multiple directives [googleMap, markers] asking for new/isolated scope on: <google-map center="center" draggable="true" zoom="zoom" markers="markers" mark-click="true" style="height: 400px"> 

http://errors.angularjs.org/1.2.3/$compile/multidir?p0=googleMap&p1=markers&p2=new%2Fisolated%20scope&p3=%3Cgoogle-map%20center%3D%22center%22%20draggable%3D%22true%22%20zoom%3D%2

我想使用ngMap将谷歌地图添加到我的应用程序.

演示是"静态的",因为它们只有硬编码的HTML.我希望我的代码是"动态的",因为它会周期性地要求服务器查看其数据库并返回一堆坐标来绘制,这将随时间而变化.我希望这很清楚; 如果没有,请询​​问更多细节.

我修改了ngmap标记演示,每两秒生成一些随机的纬度/经度坐标(而不是去我的服务器,就像我的最终应用程序一样).请参阅Plunk.

控制台中没有错误,似乎ngMap正在尝试添加我的标记,因为我在控制台中看到了很多这样的东西......

adding marker with options,  
Object {ngRepeat: "myMarker in markers", position: O}
clickable: true
ngRepeat: "myMarker in markers"
position: O
A: 103.96749299999999
k: 1.387454
__proto__: O
visible: true
__proto__: Object

其中K和A是Lat/Long,正如我所期望的那样.

但是......我在地图上看不到任何标记.我究竟做错了什么？

[更新]一个很好的答案,我很高兴之后获得了赏金.对于其他读这个并且希望使用ngMap的人来说@allenhwkim在另一个stackoverflow问题中说,我认为,在他的博客上,ngMap只是为你创建地图,之后你用标准的Google Maps API来操纵它.

例如,在循环添加标记之前,我声明
var bounds = new google.maps.LatLngBounds();并在循环中,在将标记添加到地图后,我bounds.extend(latlng);和最后,在循环之后,我

var centre = bounds.getCenter();  
$scope.map.setCenter(centre);

我分叉了答案并创建了一个新的Plunk来展示这个.这不是世界上最实用的功能,但重点是展示如何使用$scope.mapGoogle Maps API.再次感谢Allen,ngMap.

我在angularjs应用程序中使用ngMap.当我尝试在地图元素上设置缩放时,我遇到了错误.以下是Chrome控制台的错误消息:

 TypeError: Cannot read property 'apply' of undefined
    at Wk.eventFunc (ng-map.js:205)
    at Object.T.trigger (main.js:18)
    at kf (main.js:22)
    at Wk.N.set (main.js:21)
    at Wk.setZoom (main.js:29)
    at ng-map.js:1568
    at angular.js:6837
    at forEach (angular.js:323)
    at Object.$get.Attributes.$set (angular.js:6835)
    at interpolateFnWatchAction (angular.js:8157)

当我的map元素的zoom属性触发时:

<map center="{{initCenter.lat}}, {{initCenter.lng}}" zoom="{{zoom}}" on-dragend="dragend()" on-zoom_changed="zoomchanged()">

被绑定到我的角度控制器:

app.controller("mapCtrl", function ($scope, $location, dataContext) {
    $scope.markers = [];

    $scope.initCenter = dataContext.center();
    $scope.zoom = dataContext.zoom();

dataContext是一种在应用程序中公开各种状态变量的服务.我也尝试通过函数设置$ scope.zoom,产生相同的错误.

错误发生在ng-map.js文件的第1568行:

    var observeAndSet = function(attrs, attrName, object) {
  attrs.$observe(attrName, function(val) {
    if (val) {
      void 0;
      var setMethod = …

这个问题是关于angularjs-google-maps,https://github.com/allenhwkim/angularjs-google-maps

有没有办法在标记上使用ng-click来设置这样的变量？(为了测试目的,1的值是硬编码的).单击当前标记似乎不会触发ng-click.

<marker ng-repeat="instance in common.instances" 
 position="[{{instance.lat}},{{instance.lng}}]" 
 ng-click="common.selectedinstance = 1">
</marker>

我使用带有ng-map的谷歌地图,并使用附加到这些标记的标记和信息窗口添加到地图中使用ng-repeat.我的角度视图如下:

<div id="mapWrap" map-lazy-load="https://maps.google.com/maps/api/js">      
<map center="current-location" zoom="9" on-bounds_changed="getLocations()">

    <marker  ng-repeat="myMarker in myMarkers"
        clickable="true"
        on-click="showInfoWindow(event, '{{myMarker.infoWindowId}}')"
        id="{{myMarker.id}}"
        position="[{{myMarker.lat}},{{myMarker.lon}}]"
        title="{{myMarker.title}}"
        draggable="false"
        opacity="{{myMarker.opacity}}"
        visible="{{myMarker.visible}}"
        icon="{{myMarker.icon}}">
    </marker>

    <info-window ng-repeat="infoWindow in infoWindows" 
        id="{{infoWindow.id}}" 
        visible-on-marker="{{infoWindow.markerId}}">
            <div ng-non-bindable="">
                <h1>{{infoWindow.name}}</h1>
                <p>{{infoWindow.text}}</p>
                <a href="{{infoWindow.url}}">Get forecast</a>
            </div> 
    </info-window>

</map>
</div>

将myMarker.infoWindowId对应于infoWindow.id和myMarker.id到infoWindow.markerId.似乎没有问题,加载视图和控制器后,标记和infowindows在DOM中列出得很好.

标记在地图上显示得很好,因为它们在on-bounds_changed="getLocations()"执行功能时会更新.

信息窗口列表也会更新getLocations(),标记和信息窗口可以在DOM中看到,但是当我点击相应的标记时,信息窗口不显示.尝试使用视图中的单个信息窗口项,并在用户单击标记时更新其内容,但没有任何更改.

任何人都可以指出我正确的方向,我在这里做的不是什么？谢谢.

第二个问题:如果我必须ng-non-bindable在信息窗口内容中使用(否则ng-map抱怨),我该如何动态更新/生成信息窗口的内容？但是只有在显示infow-windows之后才会出现此问题.

嗨,我正在尝试使用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;

}])