角度谷歌地圖給出了一個錯誤

我想讓角谷歌地圖工作，但我遇到了這些錯誤。角度谷歌地圖給出了一個錯誤

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; 
});

有人可以幫我解決這個問題？

來源

2017-07-12 kashif roshen

你缺少一個模塊，它應該存在於產生的角度錯誤的URL，在這種情況下心不是清楚哪些模塊。你可能想發佈enitre錯誤。 –

你需要改正你的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

來源

2017-07-12 09:13:08 anoop

我想你說什麼，但我仍然得到同樣的錯誤：/我不知道什麼代碼，我嘗試我得到這個巨大的injector.moduler error..I我就做什麼 –

@kashifroshen完全喪失：GoogleMap的API對'的依賴angular-simple-logger.js'庫，這也需要導入。看到這[小提琴]（http://jsfiddle.net/k5nrf4eb/），我更新了我的答案。 – anoop

你是一個救星man..Thanks一個million..it加載now..I有question..When我包括我的API密鑰的谷歌地圖API的腳本標記它說：「你已經包括了谷歌地圖API多次在這頁上，這可能會導致意外的錯誤。「我應該包括它還是腳本標籤包含足夠？ –

角度谷歌地圖給出了一個錯誤

回答

相關問題