3

我正在编写一个嵌入了谷歌地图的应用程序。这个嵌入在我做一些路由之前显示，但现在它不会工作。这是 AngularJS 的常见问题吗？如果不是，我认为不是，有人可以向我解释我做错了什么吗？
这是我的代码：

JS：

(function() {

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


    $scope.locationName = $routeParams.locationName;
  }

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

索引 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>

地图 HTML：

<style>
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100%
  background:#fff;}
</style>
<div ng-controller="mapController">
    <div link="blue" vlink="blue"><a ng-href="#/search">Back To Search</a></div>
    <p>Map for {{locationName}}</p>
    <div id="map-canvas"></div>

如果更适合您，这里也是完整项目的一部分：http
://plnkr.co/edit/AiVc6nccqke8Jluonpxl?p=preview 感谢您的帮助！

4

1 回答 1

3

而不是google.maps.event.addDomListener用来调用初始化函数，你应该用 Angular 的方式来做。首先，将初始化函数添加到范围并删除 google DomListener：

(function() {

mapController.$inject = ['$scope', '$routeParams'];
  function mapController($scope, $routeParams) {
    $scope.initialize = function() {
      var mapOptions = {
        center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 5
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
    }

    $scope.locationName = $routeParams.locationName;
  }

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

然后您可以直接在地图画布 div 中调用初始化：

<div id="map-canvas" ng-init="initialize()"></div>
于 2014-11-10T02:41:13.360 回答