angularjs - AngularJS 的谷歌地图

Question

我对 AngularJS 很陌生，我正在尝试使用 https://github.com/angular-ui/angular-google-maps .

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

我在这里创建了一个 plunk:

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。

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

开始使用

一个。 Download并包含 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>`  

Examples

要在您的应用中使用它，只需将“ngMap”包含为您的应用的依赖项即可。

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

希望对你有帮助

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

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