Question

如何将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行＆gt; EVAL：10：2 .globalEval /＆LT; @ 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 。经过@ http://localhost:3000/js/jquery-1.11.2.min.js:3:21067 Cehttp：//本地主机：3000 / JS /角度/ LIB / angular.min.js：176：70 Ñ@ http://localhost:3000/js/angular/lib/angular-route-segment.min.js:7:5868 .compile / HTTP：//本地主机：3000 / JS /角度/ LIB /角路由segment.min.js：7：6428 。PE /本$ gethttp：//本地主机：3000 / JS /角度/ LIB / angular.min.js：128：120 2P @ http://localhost:3000/js/angular/lib/angular-route-segment.min.js:7:2649 。这$ gethttp：//本地主机：3000 / JS /角度/ LIB /角路由segment.min.js：7：3989 F /＆LT; @ http://localhost:3000/js/angular/lib/angular.min.js:112:20 。PE /这$ gethttp：//本地主机：3000 / JS /角/ lib中/ angular.min.js：125：301 。PE /本$ gethttp：//本地主机：3000 / JS /角度/ LIB / angular.min.js：122：390 。PE /本$ gethttp：//本地主机：3000 / JS /角度/ LIB / angular.min.js：126：56 升@ http://localhost:3000/js/angular/lib/angular.min.js:81:169 小号@ http://localhost:3000/js/angular/lib/angular.min.js:85:301 VF / HTTP：//本地主机：3000 / JS /角度/ LIB / angular.min.js：86：315

我做错了什么？

我在网上搜索但是每个人似乎都在使用像angular-google-map或ui-map这样的库。为什么没有人使用直接API？

Answer 1

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

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

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

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

在控制器中你粘贴这个id =＆＃34; map＆＃34;像这样的范围，

$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，在bootstrap模型中，

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

Reference

希望这有帮助！

Answer 2

发布的时间已晚，但我已将此作为解决方案。这样就没有必要在html的头部添加谷歌地图脚本src，或者谷歌地图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);
    }

setTimeout就在那里，因为谷歌地图src需要一些时间才能下载并准备就绪。＆安培;需要callback=initialize，因为这个谷歌地图将准备好进行回调。主要问题是，如果我在部分而不是主索引的头部添加谷歌地图src，代码google.maps.event.addDomListener(window, 'load', initialize)没有执行html的。但这种设置完美无瑕。

这个块到html

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

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

Google Maps API如何与AngularJS配合使用？

2 个答案: