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

Question

如何在AngularJS中使用Google Maps API？

我在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 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.m in.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？

Answer 1

您可以在angularjs中实现谷歌地图,而无需使用任何这样的插件,

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

定义map 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,在bootstrap模型中,

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

参考

希望这可以帮助!