AngularJS的Google地图

发布时间：2020-12-17 08:31:54 所属栏目：安全来源：网络整理

导读：我对AngularJS非常新，我试图使用 https://github.com/angular-ui/angular-google-maps。我只是想让地图渲染在我的页面，但我得到一个错误消息，我不知道这是什么意思。任何帮助理解此错误消息将不胜感激。我在这里创建了一个plunk： github.com/twdean/pl

我对AngularJS非常新，我试图使用 https://github.com/angular-ui/angular-google-maps。

我只是想让地图渲染在我的页面，但我得到一个错误消息，我不知道这是什么意思。任何帮助理解此错误消息将不胜感激。

我在这里创建了一个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

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

我为自己的项目创建了一个名为ng-map的google maps angularjs directive。这不需要任何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>`

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

<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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!