谷歌地图为AngularJS

Question

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

Answer 1

我建议另一个替代方案,ng-map.

我为自己的项目创建了一个名为ng-map 的google maps angularjs指令.这不需要任何Javascript编码来实现简单的功能.

开始

一.下载并包含ng-map.js或ng-map.min.js

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="dist/ng-map.min.js"></script>`

二.使用map标签和可选control,marker以及shape标签

<ng-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" />
</ng-map>`  

例子

要在您的应用中使用它,只需将"ngMap"作为您应用的依赖项.

var myApp = angular.module('myApp', ['ngMap']);

希望能帮助到你

--------------编辑-------------------

对于那些寻找angular2版本的人,
还有ng2-map https://ng2-ui.github.io/#/google-map

Answer 2

您似乎在google-map元素中包含了"markers"属性.

事实上正如@Tyler Eich所提到的那样,截至2013年12月5日的文档仍然过时.删除标记属性似乎使它工作.

以下是显示标记的方法:

的index.html

<div ng-controller="MapCtrl">
    <google-map id="mymap" 
            center="center" 
            zoom="zoom" 
            draggable="true"                                    
            mark-click="false">
            <markers>
                <marker ng-repeat="marker in markers" coords="marker">
                </marker>
            </markers>
    </google-map>
</div>

controller.js

var controller = module.controller('MapCtrl', function($scope) {
  $scope.myMarkers = [
      {
         "latitude":33.22,
         "longitude":35.33
      },
      ...
  ];

  $scope.center = {
      latitude: 33.895497,
      longitude: 35.480347,
  };

  $scope.zoom = 13;
  $scope.markers = $scope.myMarkers;
  $scope.fit = true;
});