2015-04-17 102 views
0

我想學習角度,並使用Angular-Google-MapsAngular Seed

我只是想讓地圖顯示出來,但我不認爲它正在接收緯度,經度和縮放參數,因此沒有任何內容。我沒有在Chrome中的Web開發人員檢查員中顯示任何錯誤。

我相信這個問題是在添加此

$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 }; 

爲了我喜歡的範圍的角度,谷歌,地圖文件的讀取。

如果我跳過上述說明並在我的index.html文件中執行此操作,它將起作用。

<ui-gmap-google-map center='{ latitude: 45, longitude: -73 }' zoom='zoom: 8'></ui-gmap-google-map> 

這是我app.js文件:

'use strict'; 

// Declare app level module which depends on views, and components 
angular.module('myApp', [ 
    'ngRoute', 
    'myApp.view1', 
    'myApp.view2', 
    'myApp.view3', 
    'myApp.version', 
    'uiGmapgoogle-maps' 
]) 
.controller('mapCtrl', function($scope, uiGmapGoogleMapApi){ 
    $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 }; 
}) 
.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.otherwise({redirectTo: '/view1'}); 
}]); 

這是我的index.html文件

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Project R</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css"> 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css"> 
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="app.css"> 
</head> 
<body> 
<ui-gmap-google-map id="map-container" center='map.center' zoom='map.zoom'></ui-gmap-google-map> 

    <ul class="menu"> 
    <li><a href="#/view1">Add Memory</a></li> 
    <li><a href="#/view2">Profile</a></li> 
    <li><a href="#/view3">Search</a></li> 
    </ul> 

    <!--[if lt IE 7]> 
     <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
    <![endif]--> 

    <div ng-view></div> 

    <div>Angular seed app: v<span app-version></span></div> 

    <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script> 

    <!-- In production use: 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> 
    --> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-route/angular-route.js"></script> 
    <script src="app.js"></script> 
    <script src="view1/view1.js"></script> 
    <script src="view2/view2.js"></script> 
    <script src="view3/view3.js"></script> 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="components/version/version.js"></script> 
    <script src="components/version/version-directive.js"></script> 
    <script src="components/version/interpolate-filter.js"></script> 
    <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script> 
    <script src='bower_components/lodash/dist/lodash.min.js'></script> 
    <script src='bower_components/angular-google-maps/dist/angular-google-maps.min.js'></script> 
</body> 
</html> 

app.css文件包括這些款式:

#map-container{ 
    height:400px; 
    width:100%; 
    position: absolute; 
    z-index: -1; 
    left:0; 
    top:0; 
} 
.ng-isolate-scope{ 
    height:400px; 
    width:100%; 
} 

.angular-google-map{ 
    height:400px; 
    width:100%; 
} 
.angular-google-map-container{ 
    position: absolute; 
    height:400px; 
    width:100%; 
} 

回答

1

它看起來不像你在你的html中聲明ng-appng-controller。試試下面的代碼的開頭(顯然收出的是div不管你想要的是控制器的範圍內結束):

<body ng-app="myApp"> 
    <div ng-controller="mapCtrl"> 
     <ui-gmap-google-map id="map-container" center='map.center' zoom='map.zoom'></ui-gmap-google-map> 
+0

這就是問題......這讓它工作。但是,在文檔中他們並不要求div包含ui-gmap-google-map標籤。我不知道如何根據他們在這裏的文檔工作:http://angular-ui.github.io/angular-google-maps/#!/use – Livi17

+0

我相信發生的是通過提供值直接在HTML中,您將不再需要控制器,因此當您對其進行硬編碼時,它可以工作。當你使用'map.center'這樣的綁定從控制器中引入這些值時,這就是問題出現的地方,因爲你顯然需要這個控制器。 – MattDionis

+0

這是真的,我假設和文檔可能假定您在路由定義中定義了控制器,因爲這通常是執行此操作的最佳位置。老實說,仍然不會使用這個指令作爲學習角度的出發點,文檔中存在明確的缺陷,而且對於大多數人的需求來說,它過於複雜。 – shaunhusain

0
/** 
* itSimpleGoogleMap Module 
* 
* Just a google maps api wrapper 
*/ 

(function(){ 
    'use strict'; 

    angular.module('itSimpleGoogleMap', []) 

    .directive('itSimpleGoogleMap', function($compile, $timeout){ 
    // Runs during compile 
    var _currentMarkers = []; 
    var _overlays = []; 

    var newdiv = document.createElement('div'); 
    newdiv.style.width = "100%"; 
    newdiv.style.height = "100%"; 
    var map = new google.maps.Map(newdiv, { 
     center: {lat: 41.90, lng: -87.65}, 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
    }); 

    return { 
     // name: '', 
     // priority: 1, 
     // terminal: true, 
     scope: { 
     markers:'=', 
     overlays:'=', 
     triggerResize:'=' 
     }, // {} = isolate, true = child, false/undefined = no change 
     // controller: function(scope, $element, $attrs, $transclude) {}, 
     // require: 'ngModel', // Array = multiple requires, ? = optional,^= check parent elements 
     // restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment 
     // template: '', 
     // templateUrl: '', 
     // replace: true, 
     // transclude: true, 
     // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})), 
     link: function(scope, iElm) { 
     iElm[0].appendChild(newdiv); 

     _.each(_currentMarkers, function(marker){ 
      marker.setMap(null); 
     }) 
     _.each(_overlays, function(overlay){ 
      overlay.setMap(null); 
     }) 

     google.maps.event.trigger(map, 'resize'); 


     scope.$watch('triggerResize', function(){ 
      google.maps.event.trigger(map, 'resize'); 
     }); 


     $timeout(function(){ 

      var mapOptions = { 
      center: {lat: 41.90, lng: -87.65}, 
      zoom: 10 
      }; 


      // scope.$watchCollection('options', function(){ 
      // if(!scope.options || !map){ 
      //  return ; 
      // } 

      // map.setCenter({lat:scope.options.center.lat,lng:scope.options.center.lng}); 
      // }); 


      scope.$watch('overlays', function(){ 
      if(!scope.overlays || !map){ 
       return ; 
      } 

      _.forEach(_overlays, function(curOverlay){ 
       curOverlay.setMap(null); 
      }); 

      _.forEach(scope.overlays, function(overlayData){ 
       var newOverlay = new google.maps.KmlLayer({ 
       url: overlayData, 
       map:map 
       }); 
       _overlays.push(newOverlay); 
      }); 

      }); 

      scope.$watchCollection('markers', function(){ 
      if(!scope.markers || !scope.markers[0] || !scope.markers[0].coords.latitude) 
      { 
       return; 
      } 

      _.forEach(_currentMarkers, function(curMarker){ 
       curMarker.setMap(null); 
       google.maps.event.clearInstanceListeners(curMarker); 
      }); 

      _currentMarkers = []; 

      var bounds = new google.maps.LatLngBounds(); 

      var infowindow = new google.maps.InfoWindow(); 

      if(scope.markers.length==0){ 
       map.setCenter({lat: 41.90, lng: -87.65}); 
       return; 
      } 

      _.forEach(scope.markers, function(markerData){ 
       var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(markerData.coords.latitude,markerData.coords.longitude), 
        map: map, 
        icon:markerData.icon 
        // title:markerData.data['Growing Site Name'].answer 
       }); 

       bounds.extend(marker.position); 

       var infoWindowElement; 

       $compile(markerData.infoWindow)(scope, function(cloneElm){ 
       infoWindowElement = cloneElm[0]; 
       }); 

       google.maps.event.addListener(marker, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(infoWindowElement); 
       infowindow.open(map,marker); 
       }); 
       _currentMarkers.push(marker); 
      }); 
      map.fitBounds(bounds); 
      }); 

     },100) 
     } 
    }; 
    }); 
})(); 

用法是這樣的:

<it-simple-google-map 
    overlays="model.mapOpts.overlays" 
    markers="model.mapOpts.markers" 
    trigger-resize="resizeMap"> 
</it-simple-google-map> 

在我在這裏的實現我實際上只創建了1個地圖對象,只是在找到這個指令的地方附加它,所以這不能在屏幕上使用多個地圖對象,但是對我的項目來說這是一個優化。如果您在鏈接函數中移動地圖對象的創建,那麼每次遇到編譯指令時都會創建一個。

當指令被重新使用時,在不同頁面上的不同容器大小重新使用指令時,觸發器調整大小對地圖函數調用時會調整自身的大小。

剛注意到我也只做了一些處理,取一組標記,然後以界限作爲設置位置的方法,但如果您有興趣在此基礎上進行構建,請讓我知道並可幫助將這些部件添加到適當處理中心/縮放。