代码之家 › 专栏 › 技术社区 › kashif roshen

角度谷歌地图出错

angular-google-maps google-maps angularjs

1

kashif roshen · 技术社区 · 9 年前

我试图让谷歌地图的角度工作,但我遇到了这些错误。

http://errors.angularjs.org/1.6.5/ $injector/Moduler?

上述错误持续了大约半页。

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\u被客户端阻塞

索引.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;
});

1 回复 | 直到 9 年前

1

anoop 9 年前

你需要纠正你的错误 Markers factory factory 必须返回对象。

所以,改变一下:

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 fiidle