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);
});
};