使用 AngularJS 的谷歌地图路由答案

【问题标题】：Google Maps Routing W/ AngularJS使用 AngularJS 的谷歌地图路由
【发布时间】：2014-07-23 15:41:32
【问题描述】：

我创建了一个使用谷歌地图的应用程序，地图在我做路线之前就出现了。但路由后它不会显示。这是我的应用程序代码。
JS：
search-controller.js

(function() {
  searchController.$inject = ['$scope'];
  function searchController($scope) {

    $scope.ASiteLocs = [There Is Code In here that is too long and irrelevant to the map];
    $scope.SSiteLocs = [""];
    $scope.SiteLocs = $scope.SSiteLocs.concat($scope.ASiteLocs);

    angular.forEach($scope.SiteLocs, function(location) {
      var clength = location.Point.coordinates.length;
      if (location.Point.coordinates.substring(clength - 2, clength) === ",0") {
        location.Point.coordinates = location.Point.coordinates.substring(0, clength - 2).split(",");
        Lat = location.Point.coordinates[0];
        Lon = location.Point.coordinates[1];
        Com = ",";
        location.Point.coordinates = Lon.concat(Com, Lat);
      }

      angular.forEach($scope.SSiteLocs, function(object) {
        object.carrier = 'Sprint';
      });
      angular.forEach($scope.ASiteLocs, function(object) {
        object.carrier = 'AT&T';
      });

    });
  }

  angular.module("siteLookUpApplication").controller('searchController', searchController);
}());

map-controller.js

(function() {

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

    // Save the locationName in the url to the scope
    $scope.locationName = $routeParams.locationName;
  }

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

app.js

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

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

HTML：
map.html

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

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 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="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
    <script data-require="google-maps@1.0.0" data-semver="1.0.0" src="http://maps.google.com/maps/api/js?sensor=false"></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>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0wdLb9-Os4YVxn_JR2sY08xEN-1aJkMM"></script>
    <title>Site ID</title>
  </head>

  <body link="white" vlink="white">
    <div class="text-center">
      <h1>Site Finder</h1>
      <div id="map-canvas"></div>
      <div ng-view></div>      
    </div>
  </body>
</html>

search.html

<div>
      <input type="text" ng-model="search" border="1" placeholder="Please enter site name..." />

      <table border="1" width="100%">
        <thead>
          <tr>
            <td>Name</td>
            <td>Carrier</td>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="site in SiteLocs | filter : search">
            <td>
              <a ng-href="#/map/{{site.name}}">  
              {{site.name}}
              </a>
            </td>
            <td>
              {{site.carrier}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

如果这更容易的话，这里是我的项目的一个小插曲：http://plnkr.co/edit/AiVc6nccqke8Jluonpxl?p=info

【问题讨论】：

标签： javascript html angularjs google-maps url-routing

【解决方案1】：

你有几个问题：

Google Maps api 加载了两次
Google 地图应该在 Angular 之前加载
jQuery 应该在 Angular 之前加载
在 map.html 中，div id 有错别字
在地图控制器中“站点”未解决（对于中心属性）
map-canvas 存在于 index.html 中（应该删除）
在地图控制器中，初始化函数被声明但从未被调用
实际地图元素上的 CSS 有点不稳定，不会显示 - 用于测试，在其上放置一个静态高度或其他东西

应用结构说明：

使用文档和窗口时，您应该注入 $document 和 $window
也许您可以为地图使用指令而不是控制器——请参阅http://angular-google-maps.org/
过滤后的列表看起来很长，考虑使用ReactJS 或分页。

【讨论】：

我认为问题在于没有调用初始化函数。为了让代码运行，我应该在哪里调用它？

【解决方案2】：

 executiveLiveTracking(executive) {
        debugger 

            let isOpenLiveTracking = executive !== undefined ? PreventMapRendering(executive.deliveryExecutiveId, true) : false;
            if (isOpenLiveTracking) {
                this.setState({
                    isLengthExceededMap: false,
                    DeliveryExecutiveId: executive.deliveryExecutiveId,
                    liveTrackingModalVisible: true,
                    snapPointList: [],
                    liveTrackingExecutiveName: executive.executiveName,
                    liveTrackingExecutiveLat: executive.executiveLatitude,
                    liveTrackingExecutiveLng: executive.executiveLongitude
                });
            }
            else {
                MessageBox(Constants.ERROR_MSG_FOR_MAP_RENDERING, Constants.INFO);
            }

【讨论】：