离子框架 - 无法在wp8中移动或拖动地图

时间:2015-05-22 02:48:26

标签: google-maps windows-phone-8 google-maps-api-3 ionic-framework

我有一个主菜单和一个访问地图视图的项目。这是第一次根据期望运行地图。地图也可以放大,midOnMe,我可以给位置标记。但是当我移动或拖动地图时,地图视图突然关闭并返回主菜单。当我再次尝试访问地图时,地图视图显示但主菜单视图显示了一半。 这是我的js代码:

angular.module('starter.controllers')

    .controller('LokasiBayarCtrl', function($scope, $ionicLoading, $location, $compile) {
        $scope.go = function(path) {
            $location.path(path);
        };

        var map, infoWindow, mapservice,
            myLatlng = new google.maps.LatLng(-33.8668283734, 151.2064891821),
            mapOptions = {
                //center: myLatlng,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false
            },
            iconsBase = 'img/marker/',
            icons = {
                atm: { icon: iconsBase + 'pln.png' }
            };


        // Marker + infowindow + angularjs compiled ng-click
        var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
        var compiled = $compile(contentString)($scope);

        var mapHeight = Math.round( 3 / 5 * window.SCREEN_HEIGHT );
        mapHeight = ( window.SCREEN_HEIGHT < 500 ) ? 240 : mapHeight;
        $scope.mapHeight = mapHeight;
        console.log("map height: " + mapHeight + " screenH: " + window.SCREEN_HEIGHT);

        function loading(){
            $ionicLoading.show({
                content: 'Getting current location...',
                showBackdrop: false //true
            });
        }

        function loadingDone(){ $ionicLoading.hide(); }

        function centerOnMe(){
            if(!$scope.map) {
                return;
            }

            loading();

            function successCb(pos) {
                myLatlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
                $scope.map.setCenter(myLatlng);

                var myPosMarker = new google.maps.Marker({
                    position: map.getCenter(),
                    icon: {
                        path: google.maps.SymbolPath.CIRCLE,
                        scale: 10
                    },
                    draggable: false,
                    map: map
                });
                console.log(pos.coords);

                console.log('centerOn Me :', map);
                searchPlaces();
                loadingDone();
            }

            function errorCb_highAccuracy(error){
                console.log('errorCb_highAccuracy : Unable to get location: ' + error.message);
                if (error.code == error.TIMEOUT) {
                    // Attempt to get GPS loc timed out after 5 seconds,
                    // try low accuracy location
                    console.log("attempting to get low accuracy location");
                    navigator.geolocation.getCurrentPosition(
                        successCb,
                        errorCb_lowAccuracy,
                        {maximumAge:600000, timeout:10000, enableHighAccuracy: false});
                    return;
                }

                var msg = "Can't get your location (high accuracy attempt). Error = ";
                if (error.code == 1)
                    msg += "PERMISSION_DENIED";
                else if (error.code == 2)
                    msg += "POSITION_UNAVAILABLE";
                msg += ", msg = "+error.message;
                loadingDone();
                console.log(msg);
            }

            function errorCb_lowAccuracy(error){
                var msg = "Can't get your location (low accuracy attempt). Error = ";
                if (error.code == 1)
                    msg += "PERMISSION_DENIED";
                else if (error.code == 2)
                    msg += "POSITION_UNAVAILABLE";
                else if (error.code == 3)
                    msg += "TIMEOUT";
                msg += ", msg = "+error.message;

                loadingDone();
                console.log(msg);
                alert(msg);
            }

            navigator.geolocation.getCurrentPosition(
                successCb, errorCb_highAccuracy, {
                    maximumAge:600000, timeout:5000, enableHighAccuracy: true
                });
        }

        function initialize() {
            console.log('init');
            map = new google.maps.Map(document.getElementById("map"),
                mapOptions);
            infoWindow = new google.maps.InfoWindow({
                content: compiled[0]
            });
            mapservice = new google.maps.places.PlacesService(map);
            $scope.map = map;

            google.maps.event.addListener(map, 'bounds_changed', searchPlaces);
            google.maps.event.addListener(map, 'zoom_changed', searchPlaces);
            google.maps.event.addListener(map, 'center_changed', searchPlaces);
            google.maps.event.addListener(map, 'resize', searchPlaces);
            google.maps.event.addListener(map, 'idle', function () {
                document.getElementById("map").setAttribute("style", "min-height: 240px; height: "+$scope.mapHeight+"px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden; -webkit-transform: translateZ(0px);");

                console.log(document.getElementById("map").getAttribute("style"));
                var center = map.getCenter();
                google.maps.event.trigger(map, 'resize');
                map.setCenter(center);
            });

            centerOnMe();
        }

        function getPlaceData(result){
            return {
                name: result.name, address_fmt: result.formatted_address, icon: result.icon, types: result.types,
                vicinity: result.vicinity, phone: result.formatted_phone_number, website: result.website
            };
        }

        function searchPlaces(){
            console.log('searchPlaces');
            
            // nearby search
            var request = {
                location: myLatlng,
                radius: '1000',
                types: ['atm', 'bank'],
                rankby: 'prominence'
            };
            mapservice.nearbySearch(request, searchCb);
        }

        function searchCb(results, status){
            if (status != google.maps.places.PlacesServiceStatus.OK) {
                console.log('error');
                //alert(status);
                console.log(status);
                return;
            }
            console.log(results.length);
            for (var i = 0; i < results.length; i++) {
                createMarker(results[i]);
            }

            /*for (var i = 0, result; result = results[i]; i++) {
                //if (i < 3) { console.log(result); }
                console.log('success');
                createMarker(result);
            }*/
        }

        function createMarker(place) {
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location,                    
                icon : icons['atm'].icon
            });

            google.maps.event.addListener(marker, 'click', function() {
                mapservice.getDetails(place, function(result, status) {
                    if (status != google.maps.places.PlacesServiceStatus.OK) {
                        alert(status);
                        return;
                    }
                    console.log(result);
                    infoWindow.setContent(result.name);
                    infoWindow.open(map, marker);

                    $scope.place = getPlaceData(result);
                    console.log($scope.place);

                    $scope.$apply(); // ZUL : quick and dirty
                });
            });
        }


        //google.maps.event.addDomListener(window, 'load', initialize);

        $scope.centerOnMe = function() {
            centerOnMe();
        };

        $scope.clickTest = function() {
            alert('Example of infowindow with ng-click')
        };

        // main
        initialize();
        $scope.place = null;
    });

任何人都可以告诉我我的代码有什么问题吗? 以前我道歉,因为我的英语很糟糕,如果有人能帮助我,我将不胜感激。

0 个答案:

没有答案