Javascript 在AngularJS应用程序中存储永久变量
我正在构建一个AngularJS应用程序,用户可以使用谷歌地图选择一个点,然后给他们一个随时间扩展的半径。我也希望他们能够很容易地分享半径与其他人只要给一个链接。以下是我的页面: 选择点: 搜索半径: 我考虑过使用ngRoute并将应用程序全部放在一个页面上,这样一个用户就可以在一次会话中使用。但我希望其他人能够访问搜索半径只是与网址。如果您有其他建议(如使用php或JSON),我很乐意听取 用于选择位置的JS:Javascript 在AngularJS应用程序中存储永久变量,javascript,angularjs,Javascript,Angularjs,我正在构建一个AngularJS应用程序,用户可以使用谷歌地图选择一个点,然后给他们一个随时间扩展的半径。我也希望他们能够很容易地分享半径与其他人只要给一个链接。以下是我的页面: 选择点: 搜索半径: 我考虑过使用ngRoute并将应用程序全部放在一个页面上,这样一个用户就可以在一次会话中使用。但我希望其他人能够访问搜索半径只是与网址。如果您有其他建议(如使用php或JSON),我很乐意听取 用于选择位置的JS: var map = null; var markers = []; var cus
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 = [];
}
搜索半径的新代码:
(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);
您可以执行以下操作: 在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,你就有了解析地图所需的所有数据。瞧!在url:“/:lat/:lon/:radius”中,每一个都是javascript中包含的变量,这些变量是根据用户输入计算出来的。嗯,
:lat
和:lon
只是我假设你可能使用的占位符,就像可以在google maps上使用e将某个位置归零。只要扩展此逻辑,您可以使用任何您想要的。如果您想将此地址设为静态地址,您只需在控制器或resolve
函数中计算地址,并删除:lat
和:lon
参数,谢谢您的帮助到目前为止@DustinTothless。我正在尝试这个解决方案,但是在你给我的第一段代码中,你在顶部放了$stateProvider,但是你不需要函数或参数或其他东西吗?而且我仍然没有设置我的.configuration,我是否可以将第一段代码复制并粘贴到配置中?>“但是你不需要一个函数或参数或其他什么吗?”我不太明白你在这里的意思。如果你问它是否是实际代码,那么是的。那会有用的。你不需要将函数与resolveMap
放在一起。是的,复制此代码应该有用:),我可能已经找到了修复方法,但忘记将其作为参数添加到函数中
// 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);