Question

我正在开发一个简单的angularjs单页面应用程序（SPA）。我需要将谷歌地图与我的应用程序集成。

但是我在加载谷歌地图时遇到了奇怪的问题。如果我在简单的HTML页面加载谷歌地图一切正常。但是当我使用角度路由导航到同一页面时，只有标记显示并且谷歌地图未加载。

请有人帮我解决这个问题下面是控制器中的代码。

SEMSModule。控制器（＆＃39; transportMapController＆＃39;，[＆＃39; $ scope＆＃39;，＆＃39; $ rootScope＆＃39;，＆＃39; DataService＆＃39;，＆＃39; $ http＆＃39; ，函数（$ scope，$ rootScope，DataService，$ http）{

        window.initMap = function () {
            var map = new google.maps.Map(document.getElementById('map'), {
                // center: {lat: -33.866, lng: 151.196},
                center: { lat: 18.63151522815647, lng: 73.85029623056447 },
                zoom: 300,
                mapTypeId: google.maps.MapTypeId.SATELLITE
            });

            var infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);

            service.getDetails({
                placeId: 'ChIJMyPomIXHwjsRACHB6Yi5VQ4'
            }, function (place, status) {
                if (status === google.maps.places.PlacesServiceStatus.OK) {

                    var marker = new google.maps.Marker({
                        map: map,
                        position: place.geometry.location
                    });
                    var myLatLng = { lat: 18.63151522815434, lng: 73.85029623056221 };
                    var marker1 = new google.maps.Marker({
                        position: myLatLng,
                        map: map,
                        title: 'Hello World!'
                    });
                    $scope.$apply();
                    google.maps.event.addListener(marker, 'click', function () {

                        // infowindow.setContent(place.name);
                        infowindow.setContent(place.formatted_address);

                        infowindow.open(map, this);
                    });

                    window.setTimeout(function () {

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

        };
        $scope.openInfoWindow = function (e, selectedMarker) {
            e.preventDefault();
            google.maps.event.trigger(selectedMarker, 'click');
        }

        function loadGoogleMaps() {

            var a = document.getElementById("map");

            var script_tag = document.createElement('script');

            script_tag.setAttribute("type", "text/javascript");
            script_tag.setAttribute("src", "https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=places&callback=initMap");
            //  (document.getElementById("map")).appendChild(script_tag);
            (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);


        }

        loadGoogleMaps();


    }]);

谷歌地图不使用角度js ng-view

0 个答案: