Angular google 地图给出错误

Question

我正在尝试让 angular google 地图正常工作，但我遇到了这些错误。

angular.js:88 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.5/$injector/modulerr?

上面的错误持续了大约半页。

https://csi.gstatic.com/csi?v=2&s=mapsapi3&v3v=29.10&action=apiboot2&e=10_1_0,10_2_0&rt=main.31 net::ERR_BLOCKED_BY_CLIENT

index.html

 <!DOCTYPE HTML>
 <html>
 <head>
 <style>
    html,
    body {
        height: 100%;
    }

    .angular-google-map-container {
        height: 100vh;
    }
</style>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/
angular.min.js"></script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js">
</script>
<script src="./node_modules/angular-google-maps/dist/angular-google-
maps.js"></script>
<script src="./map.controller.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBL3uzNfWSpztGvmqhBLf-
gYdfdxrCSOQo">
</script>
</head>

<body>
<div ng-app="myApp" ng-controller="gMap">
    <ui-gmap-google-map center='map.center' zoom='map.zoom' aria-
    label="Google map">

        <ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" 
        options="marker.options" events="marker.events" idkey="marker.id">
            <ui-gmap-window>
                <div>{{marker.window.title}}</div>
            </ui-gmap-window>
        </ui-gmap-marker>

    </ui-gmap-google-map>
</div>
</body>

</html>

应用程序和控制器

var myApp = angular.module('myApp', ['uiGmapgoogle-maps']);

myApp.factory("Markers", function(){
  var Markers = [
  {
    "id": "0",
    "coords": {
    "latitude": "45.5200",
    "longitude": "-122.6819"
  },
  "window": {
    "title": "Portland, OR"
  }
},
{
  "id": "1",
  "coords": {
    "latitude": "40.7903",
    "longitude": "-73.9597"
  },
  "window" : {
    "title": "Manhattan New York, NY"
  }
}
];
return Markers;
});

myApp.controller("gMap",function($scope,Markers){
  $scope.map = { 
   center: { latitude: 39.8282, longitude: -98.5795 }, 
  zoom: 4 
 };
$scope.markers = Markers;
});

有人可以帮我解决这个问题吗？

Answer 1

您需要更正您的 Markers factory 实现，factory 必须 return 一个对象。

所以改成这样:

myApp.factory("Markers", function(){
  var Markers = [
  {
    "id": "0",
    "coords": {
    "latitude": "45.5200",
    "longitude": "-122.6819"
  },
  "window": {
    "title": "Portland, OR"
  }
},
{
  "id": "1",
  "coords": {
    "latitude": "40.7903",
    "longitude": "-73.9597"
  },
  "window" : {
    "title": "Manhattan New York, NY"
  }
}
];
return {
   markers: Markers
  };
});

然后在您的 gMap controller 中使用工厂数组，例如：

$scope.markers = Markers.markers;

更新：

您还需要导入 angular-simple-logger.js 库，因为它依赖于 googlemap api。看到这个 fiidle

Angular google 地图给出错误

Angular google maps giving an error

angularjs

google-maps

angular-google-maps