Question

我正在构建一个AngularJS应用程序，用户可以使用Google地图选择一个点，并且它们的半径会随着时间的推移而扩大。我还希望他们能够通过提供链接轻松地与他人分享这个半径。这是我的页面：

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

我考虑过使用ngRoute并将应用程序保存在一个页面上，这对于一个会话的一个用户来说是可行的。但我希望其他人能够使用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用于搜索Radius：

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

现在，无论何时点击网址，您都拥有解析地图所需的所有数据。瞧！

在AngularJS app中存储永久变量

1 个答案: