Angular google 地图给出错误
Angular google maps giving an error
我正在尝试让 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;
});
有人可以帮我解决这个问题吗?
您需要更正您的 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.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;
});
有人可以帮我解决这个问题吗?
您需要更正您的 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