Google Maps API如何与AngularJS一起使用？ [英] How does the Google Maps API work with AngularJS?

问题描述

我在AngularJS应用程序中使用这个代码：

 < style> 
 #googleMap {
 width：200px; 
 height：200px; 
} 
< / style> 
 
< div id =googleMap>< / div> 
 
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js>< / script> 
 
< script language =javascript> 
 
 var map; 
 
函数initialize（）{
 
 var mapOptions = {
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 zoom：8，
 center：new google.maps.LatLng（-34.397,150.644）
}; 
 
 map = new google.maps.Map（document.getElementById（'googleMap'），mapOptions）; 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
 
< / script> 
  

此代码位于视图中，而不是控制器中。

我在视图中有其他功能，它们工作，但谷歌地图仍然无法正常工作。

这是我在浏览器控制台中得到的错误： b
$ b

错误：google未定义
@ http：// localhost：3000 / js / jquery-1.11.2.min.js 第2行> eval：10：2
.globalEval /< @ http：// localhost：3000 /js/jquery-1.11.2.min.js:2:2615
.globalEval @ http：// localhost：3000 / js / jquery-1.11.2.min.js：2：2589
.domManip @ http：// localhost：3000 / js / jquery-1.11.2.min .js：3：23105
。after @ http：// localhost：3000 / js / jquery-1.11.2。 min.js：3：21067
Cehttp：// localhost：3000 / js / angular / lib / angular.min.js：176：70
n @ http：// localhost：3000 / js / angular / lib / angular-route -segment.min.js：7：5868
.compile / http：// localhost：3000 / js / angular / lib / angular-route-segment.min.js：7：6428
Pe / this。$ gethttp：// localhost：3000 / js / angular / lib / angular.min.js：128：120
p @ http：// localhost：3000 / js / angular / lib / angular-route-segment.min.js：7 ：2649
this。$ gethttp：// localhost：3000 / js / angular / lib / angular-route-segment.min.js：7：3989
f /< @ http：// localhost：3000 / js / angula r / lib / angular.min.js：112：20
Pe / this。$ gethttp：// localhost：3000 / js / angular / lib / angular.min.js：125：301
Pe / this。$ gethttp：// localhost：3000 / js / angular / lib / angular.min.js：122：390
Pe / this。$ gethttp：// localhost：3000 / js / angular / lib / angular.min.js：126：56
l @ http：// localhost：3000 / js / angular / lib / angular.min.js：81：169
S @ http：// localhost：3000 / js / angular / lib / angular.min.js：85：301
vf / http：// localhost：3000 / js / angular / lib / angular.min.js：86：315

我做错了什么？

我搜索了网页，但似乎每个人都在使用angular-google-map或ui-map等库。为什么没有人使用直接API？ 解决方案

发布后很晚，但我已经将其作为解决方案。 通过这个，没有必要在html的头部添加google地图脚本src，或者没有任何针对google map src相关错误的错误的机会。该脚本将由loadScript函数自动添加。在angular中，需要在partials中添加新的js src，而不是主脚本的头部。所以我认为这将是最好的解决方案

我用这个代码块进入我的控制器。

  $ scope.initialize = function（）{
 $ scope.mapOptions = {
 zoom：8，
 center：new google.maps.LatLng （22.649907498685803，88.36255413913727）
}; 
 $ scope.map = new google.maps.Map（document.getElementById（'googleMap'），$ scope.mapOptions）; 
 
 
 $ scope.loadScript = function（）{
 var script = document.createElement（'script'）; 
 script.type ='text / javascript'; 
 script.src ='https://maps.google.com/maps/api/js?sensor=false&callback=initialize'; 
 document.body.appendChild（script）; 
 setTimeout（function（）{
 $ scope.initialize（）; 
}，500）; 
 
 
 
 
 
 $ b 
 setTimeout存在，因为需要一段时间才能下载google map src准备好了。 &安培;  callback = initialize 是需要的，因为通过这个google map可以进行回调了。主要的问题是代码 google.maps.event.addDomListener （window，'load'，initialize）没有执行，如果我添加谷歌地图src在部分而不是主index.html的头部。但这个设置完美无瑕。
 
 
 
这个块到html 
 < div class =form-group col-lg-12id =googleMap> 
< center>正在等待地图...< / center> 
< / div> 
  
现在将 ng-init =loadScript（）任何外部div中的任何位置，以便loadScript在之前进行初始化。
 
How is it possible to use the Google Maps API with AngularJS?

I am using this code in my AngularJS app:
<style>
  #googleMap {
    width: 200px;
    height: 200px;
  }
</style>

<div id="googleMap"></div>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>

<script language="javascript">

  var map;

  function initialize() {

    var mapOptions = {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644)
    };

    map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
  }

  google.maps.event.addDomListener(window, 'load', initialize);

</script>
This code is in the view and not in the controller.

I have other functions in the view and they work, but google map is still not working.

This is the error I get in the browser console:

  
Error: google is not defined
  @http://localhost:3000/js/jquery-1.11.2.min.js line 2 > eval:10:2
  .globalEval/<@http://localhost:3000/js/jquery-1.11.2.min.js:2:2615
  .globalEval@http://localhost:3000/js/jquery-1.11.2.min.js:2:2589
  .domManip@http://localhost:3000/js/jquery-1.11.2.min.js:3:23105
  .after@http://localhost:3000/js/jquery-1.11.2.min.js:3:21067
  Cehttp://localhost:3000/js/angular/lib/angular.min.js:176:70
  n@http://localhost:3000/js/angular/lib/angular-route-segment.min.js:7:5868
  .compile/http://localhost:3000/js/angular/lib/angular-route-segment.min.js:7:6428
  Pe/this.$gethttp://localhost:3000/js/angular/lib/angular.min.js:128:120
  p@http://localhost:3000/js/angular/lib/angular-route-segment.min.js:7:2649
  this.$gethttp://localhost:3000/js/angular/lib/angular-route-segment.min.js:7:3989
  f/<@http://localhost:3000/js/angular/lib/angular.min.js:112:20
  Pe/this.$gethttp://localhost:3000/js/angular/lib/angular.min.js:125:301
  Pe/this.$gethttp://localhost:3000/js/angular/lib/angular.min.js:122:390
  Pe/this.$gethttp://localhost:3000/js/angular/lib/angular.min.js:126:56
  l@http://localhost:3000/js/angular/lib/angular.min.js:81:169
  S@http://localhost:3000/js/angular/lib/angular.min.js:85:301
  vf/http://localhost:3000/js/angular/lib/angular.min.js:86:315
What am I doing wrong?

I searched the web but everyone seems to be using libraries like angular-google-map or ui-map. Why is no one using the direct API?
解决方案
It was late to post but I have done this as solution. By this there is no need to add the google map script src in the head of the html or there is no chance of any error for google map src related errors. The script will be added automatically by the loadScript function. In angular it is needed to add new js src in partials rather than the head of main script. So I think this will be the best solution

I used this code chunk into my controller.
    $scope.initialize = function() {
        $scope.mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(22.649907498685803, 88.36255413913727)
        };
        $scope.map = new google.maps.Map(document.getElementById('googleMap'), $scope.mapOptions);
    }

    $scope.loadScript = function() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.google.com/maps/api/js?sensor=false&callback=initialize';
        document.body.appendChild(script);
        setTimeout(function() {
            $scope.initialize();
        }, 500);
    }
setTimeout is there because some time is needed for google map src to be downloaded and be ready. & callback=initialize is needed because by this google map will be ready for a callback.The main problem was that the code  google.maps.event.addDomListener(window, 'load', initialize) was not executing if I add the google map src in partial rather than the head of main index.html. But this setup works flawlessly.

And this chunk to the html
<div class="form-group col-lg-12" id="googleMap">
      <center>Waiting for the map...</center>
</div>
Now place ng-init="loadScript()" anywhere in any outer div so that loadScript initializes before.

                        
这篇关于Google Maps API如何与AngularJS一起使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！