我正在尝试使用有角度的谷歌地图,但我遇到了这些错误。
angular.js:88未捕获错误:[$ 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;
});
有人可以帮我解决这个问题吗?
答案 0 :(得分:1)
您需要更正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
库,因为它依赖于googlemap api。见fiidle