Google Maps API 如何与 AngularJS 一起工作？答案

【问题标题】：How does the Google Maps API work with AngularJS?Google Maps API 如何与 AngularJS 一起工作？
【发布时间】：2015-07-31 21:12:46
【问题描述】：

如何将 Google Maps API 与 AngularJS 一起使用？

我在我的 AngularJS 应用程序中使用此代码：

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

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

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

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

错误：未定义 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 电话@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

我做错了什么？

我在网上搜索过，但似乎每个人都在使用诸如 angular-google-map 或 ui-map 之类的库。为什么没有人使用直接 API？

【问题讨论】：

您是否在页面顶部包含 Google Map javascript？
部分没有。但我也试过用头脑写。但不工作。什么都没有显示。 div 容器可见，但 div 中没有地图。 @UsainBloot
是否有可能拥有您的代码，也许在 plunklr 中？由于错误表明 var google 尚未定义，这通常意味着 Google 的 Map JavaScript 未正确加载（或未在正确的时间）
现在我又重新启动了服务器，现在最上面的错误行是这个。 “错误：无效的属性 ID。抱歉，无法发布总代码。它很大。我可以尝试重新生成一个较小的代码。
是否有可能当角度读取脚本时地图不可用？因为地图js是一个链接所以可能当时没有下载。我在网上搜索过，但每个人都在使用任何库，如 angular-google-map、ui-map 等。但为什么不直接写在任何地方

标签： javascript angularjs google-maps google-maps-api-3

【解决方案1】：

您可以在 angularjs 中实现谷歌地图，而无需使用任何此类插件，

<!--use this div  where ever you want to create a map-->
     <div id="map"></div>

定义地图div的宽度和高度，

#map {
 height:420px;
 width:600px;
}

在控制器中，您将这个 id="map" 与这样的范围粘合，

$scope.mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(41.923, 12.513),
    mapTypeId: google.maps.MapTypeId.TERRAIN
}

$scope.map = new google.maps.Map(document.getElementById('map'), $scope.mapOptions);

如果你想为你想要的城市或国家创建标记，

 var cities = "Atlanta, USA";
 var geocoder= new google.maps.Geocoder();

 $scope.markers = [];

 var createMarker = function (info){
    var marker = new google.maps.Marker({
        map: $scope.map,
        position: new google.maps.LatLng(info.lat(), info.lng())
    });
 }

geocoder.geocode( { 'address': cities }, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
    newAddress = results[0].geometry.location;
    $scope.map.setCenter(newAddress);
    createMarker(newAddress)
 }
});

最后但同样重要的是，请确保在执行所有这些操作之前添加了 google maps api 脚本，

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> </script>

这是使用此代码的工作 plunker，在引导模型中，

http://embed.plnkr.co/VT7cO0L2ckSWG6g63TVG/preview

Reference

希望这会有所帮助！

【讨论】：

是的，它的工作原理。它和我做的一样。我在视图中编写了它，而您在控制器中编写了相同的代码，这使它工作。我想知道为什么它不能直接在视图中工作？我在视图中直接使用了许多 javascript 函数和脚本，它们可以正常工作。为什么不用谷歌地图？？
您是否在自己的脚本标签前添加了google api scripts 以便使用它。
是的，我在头部添加了 google api 脚本。然后在部分我创建了新的 google.maps。但在那一刻，我正在将所有这些都写在一个名为 initialize 的函数中。然后我打电话给 google.maps.event.addDomListener(window, 'load', initialize); & 此功能未触发。如果我在没有任何初始化函数或 addDomListener 的脚本中直接编写这些代码，那么它就可以工作。看了你的回答后我这样做了
是的，但你能告诉我我之前的评论的答案吗？
你正在向谷歌地图添加一个事件，甚至在它被定义之前。所以只有你的函数initialize 没有被触发并且地图没有显示。

【解决方案2】：

发帖已经很晚了，但我已将其作为解决方案。这样就不需要在html的头部添加google map script src，否则google map src相关的错误不会出现任何错误。该脚本将由 loadScript 函数自动添加。在 Angular 中，需要在部分而不是主脚本的头部添加新的 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);
    }

setTimeout 之所以存在，是因为下载并准备好 google map src 需要一些时间。 & callback=initialize 是必需的，因为这个谷歌地图将为回调做好准备。主要问题是，如果我在部分而不是主 index.html 的头部添加谷歌地图 src，则代码 google.maps.event.addDomListener(window, 'load', initialize) 没有执行。但是这个设置完美无缺。

这个块到html

<div class="form-group col-lg-12" id="googleMap">
      <center>Waiting for the map...</center>
</div>

现在将 ng-init="loadScript()" 放置在任何外部 div 中的任何位置，以便 loadScript 在之前初始化。

【讨论】：