javascript - 谷歌地图和 Angular js : TypeError: Cannot read property 'trigger' of undefined

Question

我正在尝试让 Angular 与谷歌地图一起使用。似乎无法让它工作!我得到的只是灰屏。

我获取每个经销商的所有 LatLng 并从模板传递给 Controller ​​。 当用户点击相关链接时，它应该在 map 上显示经销商。

我正在使用谷歌示例，但我收到 TypeError: Cannot read property 'trigger' of undefined.

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>

map 服务:

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

})();

Controller (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);

        });


    };

Answer 1

在您的代码中更改此行 mapService.map.event.trigger(mapService.map, 'resize');与下面的行。

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