谷歌地图AngularJS [英] Google maps for AngularJS

问题描述

我很新的AngularJS，我尝试使用<一个href=\"https://github.com/angular-ui/angular-google-maps\">https://github.com/angular-ui/angular-google-maps.

我只是试图让地图呈现在我的网页，但我收到一条错误信息，我不知道这意味着什么。任何帮助，了解此错误消息是AP preciated。

我创建了一个普拉克这里：

  github.com/twdean/plunk
 

下面是在浏览器中的错误：

 错误：[$编译：multidir]多个指令[GoogleMap的，标记]寻求新/分离范围：＆LT;谷歌地图中心=中心可拖动=真变焦=变焦标记=标记标记点击=真的风格=高度：400像素＆GT;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
 

解决方案

我建议另一种选择，NG-地图。

我创建了一个谷歌地图angularjs指令的调用，NG-地图，我自己项目。这不需要任何JavaScript编码简单的功能。

上手

一。 下载，包括NG- map.js或NG-map.min.js

 ＆LT;脚本SRC =htt​​p://maps.google.com/maps/api/js?sensor=false＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =DIST / NG-map.min.js＆GT;＆LT; / SCRIPT＆GT;`
 

二。使用地图标签，以及可选，控制，标记，和形状标签

 ＆LT; NG-地图缩放=11中心=[40.74，-74.18]＆GT;
  ＆LT;标记位置=[40.74，-74.18]/＆GT;
  ＆LT;形状NAME =圈半径=400中心=[40.74，-74.18]半径=4000/＆GT;
  ＆lt;控制NAME =鹰眼打开=真/＆GT;
＆LT; / NG-地图＆GT;`
 

例子

要使用它在你的应用程序，只需简单地ngMap作为依赖于你的应用程序。

VAR对myApp = angular.module（'对myApp'，['ngMap']）;

希望它能帮助

I am very new to AngularJS and I am trying to use https://github.com/angular-ui/angular-google-maps.

I am just trying to get the map to render on my page but I am getting an error message and I don't know what it means. Any help with understanding this error message would be appreciated.

I've created a plunk here:

github.com/twdean/plunk

Here is the Error in the browser:

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

解决方案

I suggest another alternative, ng-map.

I created a google maps angularjs directive called, ng-map, for my own project. This does not require any Javascript coding for simple functionality.

To Get Started

One. Download and include ng-map.js or ng-map.min.js

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

Two. use map tag, and optionally, control, marker, and shape tags

<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

To use it in your app, simply include 'ngMap' as dependency to your app.

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

Hope it helps

这篇关于谷歌地图AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！