Question

我正在申请。有两页。在第一页，我正在显示该国家和那里的lat＆amp; LNG。当我点击任何国家时，它会重定向到第二页。在这个页面我显示谷歌地图。根据地图标记显示。这很完美。

问题是在第二页我使用两个文本框，从这个文本框我输入lat＆amp; lng和当按下按钮标记应该在那里改变。它不起作用。我不明白我做错了什么。如果我遗漏了任何东西，请帮助我。

CODE

(function () {
    'use strict';
    myApp.controller('mapCtrl', function ($scope, $http, $stateParams) {
        $scope.lat = $stateParams._lat;
        $scope.lng = $stateParams._lng;


        $scope.clickMe = function (clicked) {
            $scope.lat = $scope.txtLatitude;
            $scope.lng = $scope.txtLongitude;
        };
    })
      .factory('mapsInit', mapsInitFactory)
      .directive('myMap', myMap);

    function mapsInitFactory($window, $q) {
        //Google's url for async maps initialization accepting callback function
        var asyncUrl = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDpqr0uW01dCVmuSCxo7XizH47-ZUuyEZM&callback=',
            mapsDefer = $q.defer();

        //Callback function - resolving promise after maps successfully loaded
        $window.googleMapsInitialized = mapsDefer.resolve; // removed ()

        //Async loader
        var asyncLoad = function (asyncUrl, callbackName) {
            var script = document.createElement('script');
            //script.type = 'text/javascript';
            script.src = asyncUrl + callbackName;
            document.body.appendChild(script);
        };

        //Start loading google maps
        asyncLoad(asyncUrl, 'googleMapsInitialized');

        //Usage: Initializer.mapsInitialized.then(callback)
        return {
            mapsInitialized: mapsDefer.promise
        };
    }

    function myMap(mapsInit) {
        return {
            restrict: 'E',
            scope: {
                mapId: '@id', // map ID
                lat: '@',     // latitude
                long: '@'     // longitude
            },
            link: function (scope) {
                console.log(scope.mapId, scope.lat, scope.long);
                if (angular.isDefined(scope.lat) && angular.isDefined(scope.long)) {

                    // Initialize the map
                    var initialize = function () {
                        var location = new google.maps.LatLng(scope.lat, scope.long);

                        var mapOptions = {
                            zoom: 6,
                            center: location
                        };

                        var map = new google.maps.Map(document.getElementById(scope.mapId), mapOptions);

                        new google.maps.Marker({
                            position: location,
                            map: map
                        });
                    };
                    mapsInit.mapsInitialized.then(function () {
                        initialize();
                    }, function () {
                    });
                }
            }
        };

    }

})();

Answer 1

首先，您需要引用相关标记：

scope.mainMarker = new google.maps.Marker({
                        position: location,
                        map: map
                    });

在您的控制器中：

$scope.clickMe = function (clicked) {
        $scope.lat = parseFloat( $scope.txtLatitude );
        $scope.lng = parseFloat( txtLongitude );

        $scope.mainMarker.setLocation(new google.maps.LatLng(
                                 $scope.lat,
                                 $scope.lng
                                 ));

    };

使用棱角JS

1 个答案: