javascript - 在 AngularJS 应用程序中存储永久变量

Question

我正在构建一个 AngularJS 应用程序，用户可以在其中使用 Google map 选择一个点，并为他们提供一个随时间扩展的半径。我还希望他们能够通过提供链接轻松地与他人分享该半径。这是我的页面:

选择点:http://alainwebdesign.ca/pl2/tom/getlocation.html

搜索半径:http://alainwebdesign.ca/pl2/

我考虑过使用 ngRoute 并将应用程序全部放在一个页面上，这样可以在一个 session 中为一个用户工作。但我希望其他人能够仅通过 URL 访问搜索半径。如果您有其他建议(例如使用 php 或 JSON)，我很想听听。

选择位置的JS:

var map = null;
var markers = [];
var custCenter = {};

function initMap()
{
    var startingCenter = { lat: 49.22, lng: -122.66 };
    custCenter = { lat: 49.22, lng: -122.66 };

    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: custCenter,
        mapTypeId: 'terrain'
    });

    // This event listener will call addMarker() when the map is clicked.
    map.addListener('click', function (event) {
        var myLatLng = event.latLng;

        deleteMarkers();
        addMarker(myLatLng);

        window.lat = myLatLng.lat();
        window.lng = myLatLng.lng();
        alert(window.lat + ', ' + window.lng);  
    });

    // Adds a marker at the center of the map.
    addMarker(custCenter);
}

// Adds a marker to the map and push to the array.
function addMarker(location) 
{
    var marker = new google.maps.Marker({
        position: location,
        map: map                
    });            

    markers.push(marker);
}

// Sets the map on all markers in the array.
function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map); 
    }
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
    clearMarkers();
    markers = [];
}

和用于搜索半径的 JS:

(function (window, ng) {
    ng.module('app', ['uiGmapgoogle-maps'])
    .controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval",
      function ($scope, $log, GoogleMapApi, $interval) {
          $log.currentLevel = $log.LEVELS.debug;
          var center = { //dynamic var(s)
              latitude: 49.22, 
              longitude: -122.66
          };

          Object.freeze(center);

          $scope.map = {
              center: center,
              pan: false,
              zoom: 16,
              refresh: false,
              events: {},
              bounds: {}
          };

          $scope.map.circle = {
              id: 1,
              center: center,
              radius: 500,
              stroke: {
                  color: '#08B21F',
                  weight: 2,
                  opacity: 1
              },

              fill: {
                  color: '#08B21F',
                  opacity: 0.5
              },
              geodesic: false, // optional: defaults to false
              draggable: false, // optional: defaults to false
              clickable: true, // optional: defaults to true
              editable: false, // optional: defaults to false
              visible: true, // optional: defaults to true
              events: {
                  dblclick: function () {
                      $log.debug("circle dblclick");
                  },
                  radius_changed: function (gObject) {
                      var radius = gObject.getRadius();
                      $log.debug("circle radius radius_changed " + radius);
                  }
              }
          }
          //Increase Radius:
          $interval(function(){
                $scope.map.circle.radius += 30; //dynamic var
          }, 1000);
      } ]);



})(window, angular);

搜索半径的新代码:

(function (window, ng) {
    ng.module('app', ['uiGmapgoogle-maps', 'ui.router'])



    //Should the .configuarion be set here?
       $stateProvider
      .state('inbox', {
          url: '/:center/:radius',
          templateUrl: 'index.html',
          controller: 'MapCtrl',
          resolve: {
            resolveMap: function (MapService, $stateParams) {
              return MapService.getData($stateParams.center, $stateParams.radius);
          }
        }
      })


    .controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval",
      function ($scope, $log, GoogleMapApi, $interval) {
          $log.currentLevel = $log.LEVELS.debug;
          var center = custCenter;

          Object.freeze(center);

          $scope.map = {
              center: center,
              pan: false,
              zoom: 16,
              refresh: false,
              events: {},
              bounds: {}
          };

          $scope.map.circle = {
              id: 1,
              center: center,
              radius: 500,
              stroke: {
                  color: '#08B21F',
                  weight: 2,
                  opacity: 1
              },

              fill: {
                  color: '#08B21F',
                  opacity: 0.5
              },
              geodesic: false, // optional: defaults to false
              draggable: false, // optional: defaults to false
              clickable: true, // optional: defaults to true
              editable: false, // optional: defaults to false
              visible: true, // optional: defaults to true
              events: {
                  dblclick: function () {
                      $log.debug("circle dblclick");
                  },
                  radius_changed: function (gObject) {
                      var radius = gObject.getRadius();
                      $log.debug("circle radius radius_changed " + radius);
                  }
              }
          }





          //Increase Radius:
          $interval(function(){
    $scope.map.circle.radius += 30; //dynamic var
    $state.transitionTo('/', {
        center: $stateParams.center, 
        radius: $scope.map.circle.radius
    }, 
    { 
        notify: false 
    });
}, 1000); //end of interval function


      } ]); //end of controller



})(window, angular);

Answer 1

您可以执行以下操作:

在 Angular 的 UI 路由器中像这样定义一个路由(状态)(不确定此功能是否在 nfRouter 中可用:

myApp.config(function($stateProvider) {
  $stateProvider
          .state('location', {
              url: '/:lat/:lon/:radius',
              templateUrl: 'partials/map.html',
              controller: 'MapCtrl',
              resolve: {
                resolveMap: function (MapService, $stateParams) {
                  return MapService.getData($stateParams.lat, $stateParams.lon, $stateParams.radius);
              }
            }
          });

});

现在，随着半径的增加更改 :radius 参数。

// Within your controller
$interval(function(){
    $scope.map.circle.radius += 30; //dynamic var
    $state.transitionTo('/', {
        lat: $stateParams.lat, 
        long: $stateParams.lon, 
        radius: $scope.map.circle.radius
    }, 
    { 
        notify: false 
    });
}, 1000);

现在，只要您点击一个 url，您就拥有了解析 map 所需的所有数据。瞧!