首页 > 编程语言> > javascript-路由后,Google Maps无法在AngularJS中工作

javascript-路由后,Google Maps无法在AngularJS中工作

2019-11-21 12:36:19 作者：互联网

我正在编写一个嵌入了Google Maps的应用程序.这个Embed在我做一些路由之前显示,但是现在不起作用了.这是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
谢谢你的帮助！！

解决方法:

与其使用google.maps.event.addDomListener调用Initialize函数,不如使用Angular方法.首先,将Initialize函数添加到作用域中,然后删除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);
}());

然后,您可以在map-canvas div中直接调用initialize：

<div id="map-canvas" ng-init="initialize()"></div>

标签：angularjs,google-maps,angularjs-routing,ng-view,javascript
来源： https://codeday.me/bug/20191121/2051787.html