Question

我正在编写一个包含Google地图的应用。所有代码看起来都是正确的，但地图根本没有显示出来。我得到了这两个错误：
Uncaught QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value of 'plnkr_dirty_exit' exceeded the quota.
和
Uncaught SyntaxError: Unexpected token {
这是我工作的一部分：http://plnkr.co/edit/AiVc6nccqke8Jluonpxl?p=preview
以下是与Google地图相关的代码：
app.js

(function() {
  angular.module("siteLookUpApplication", ["ngRoute"]);

  angular.module("siteLookUpApplication").config(function($routeProvider) {
    $routeProvider
      .when("/search", {
        templateUrl: "search.html",
        controller: "searchController"
      })
      .when("/map/:locationName/:locationCoords", {
        templateUrl: "map.html",
        controller: "mapController"
      })
      .otherwise({
        redirectTo: '/search'
      });
  });
}());

的index.html

<!DOCTYPE html>
<html ng-app="siteLookUpApplication">
  <head>
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css" type='text/css'/>
   <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0wdLb9-Os4YVxn_JR2sY08xEN-1aJkMM"></script>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.js"></script>
    <script data-require="angular-route@*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
    <script src="app.js"></script>
    <script src="map-controller.js"></script>
    <script src="search-controller.js"></script>

    <title>Site ID</title>
  </head>

  <body link="white" vlink="white">
    <div class="text-center">
      <h1>Site Finder</h1>

      <div ng-view></div>
    </div>
  </body>
</html>

map.html

<!DOCTYPE html>
<div ng-controller="mapController" style="width: 100%; height: 100%;">
    <div link="blue" vlink="blue"><a ng-href="#/search">Back To Search</a></div>
    <p>Map for {{locationName}}</p>

    <div id="map-canvas" style="width: 100px; height: 100px; position: absolute;"></div>
</div>

地图controller.js

(function() {
  function mapController($scope, $routeParams) {
    $scope.locationCoords = $routeParams.locationCoords;
    $scope.locationName = $routeParams.locationName;
    function initialize() {
      var center = new google.maps.LatLng($scope.locationCoords);
      var mapOptions = {
        center: center,
        zoom: 5
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);

  }

  angular.module("siteLookUpApplication").controller("mapController", mapController);
}());

我认为问题在于initialize();未被调用，但我相信在google.maps.event.addDomListener(window, 'load', initialize); map-controller.js内加载页面时会调用它{ 我还尝试使用ng-init和onLoad来初始化地图
我现在已经有这个问题了一段时间，我想出了所有想法。谁能告诉我为什么它不会工作？提前致谢。
附：你会考虑使用AngularUI吗？

谷歌地图不显示 - 奇怪的错误

0 个答案: