2016-03-15 26 views
0

我正試圖讓Angular與Google地圖一起工作。似乎無法得到它的工作!我得到的只是灰色屏幕。Google地圖和Angular js:TypeError:無法讀取未定義的屬性「觸發器」

我得到每個經銷商的所有LatLng並從模板傳遞給控制器​​。 當用戶點擊相關鏈接時,它應該在地圖上顯示經銷商。

我正在使用谷歌expample,但我得到TypeError:無法讀取未定義的屬性「觸發器」。

HTML:

<p><a data-location="{dLat:{{dealer.lat}}, dLng:{{dealer.lng}}, dCode:{{dealer.dealerCode}}}" ng-click="dealerMapInfo(dealer.lat, dealer.lng, dealer.dealerCode, $event)" href="#">Details</a></p> 

地圖服務:

(function(){ 
'use strict'; 

angular 
    .module('osbApp.core') 
    .factory('mapService', MapService); 


function MapService() { 

    var api = {}; 

    var config = { 
      language : "en-GB", 
      countryCode : "GB", 
      imagePath : "http://www.test.co.uk/dl/mapmarkers/", 
      countryBounds : [{lng : 2.69, lat : 60.85}, {lng : -9.23, lat : 60.85},{lng : -9.23, lat : 49.84},{lng : 2.69, lat : 49.84}] 
    }; 

    var mapAPI = new googleMapsApi(config), 
     map = new mapAPI.map(document.getElementById('myMap'), { 
     center : { 
      lat : 54.501911, 
      lng : -4.100353 
     }, 
     zoom : 5 
    }); 


    api.map = map; 

    return api; 
} 

})();

控制器(的onclick):

$scope.dealerMapInfo = function(latitude, longitude, dealerCode, $event) { 

     if ($event) { 
      $event.preventDefault(); 
     } 

     var dealerLatLng = { 
      lat: latitude, 
      lng: longitude 
     }; 

     $scope.test = dealerLatLng; 



     $scope.$watch('test', function() { 

      $timeout(function(){ 

       console.log(dealerLatLng); 

       mapService.map.event.trigger(mapService.map, 'resize'); 
       mapService.map.setCenter(dealerLatLng); 
       mapService.map.setZoom(15); 
       mapService.map.addMarker(dealerLatLng); 


      },100); 

     }); 


    }; 

回答

1

在你的代碼更改此行mapService.map.event.trigger(mapService.map, 'resize');與下面的線。

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

相關問題