angular-google-maps 运行 在初始地图加载后运行一次
angular-google-maps run function ONCE after initial map load
使用 angular-google-maps 将 google 地图合并到应用程序中
我需要一个命令，在初始地图加载完成后 运行 一个函数
- 但仅在初始加载时，不是在每次地图操作后
我不能使用 idle 或 tilesloaded，因为它们在每次移动后都会触发...
我想要的函数 运行 需要获取地图边界以在初始页面加载时从服务器拉取数据
- 我希望这在初始加载时发生一次，然后成为使用刷新的手动函数 map-control
- 如果我使用 idle 或 tilesloaded 触发它，它将在用户移动地图时 每次 提取服务器数据。
有谁知道如何在初始地图加载后触发一次性命令以获取地图详细信息（边界等）？
我试过将 maps.getBounds() 放在第二个 promise 函数中，但它不起作用。
注意，I've got a fiddle working here - 在定义了 $scope.map 控件/选项等后，我无法再链接任何承诺，因为它们没有 return 承诺：
文档中的代码示例未显示如何在定义 $scope.map 之后链接承诺 。
html
<div class="angular-google-map-container" ng-controller="MainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
</ui-gmap-google-map>
</div>
控制器
myApp.controller('MainCtrl', function($scope, uiGmapGoogleMapApi) {
uiGmapGoogleMapApi
.then(function(maps){
$scope.map = {
center: {
latitude: 37.7749295,
longitude: -122.4194155
},
zoom: 12
events: {
tilesloaded: function (maps, eventName, args) {
myServiceFuntion(maps) // this work fine but fires every time
},
dragend: function (maps, eventName, args) {
myServiceFuntion(maps) // this work fine but fires every time
},
zoom_changed: function (maps, eventName, args) {
myServiceFuntion(maps) // this work fine but fires every time
}
}
}
$scope.bounds = maps.getBounds() // this gives me 'getBounds() not a function'
myServiceFuntion(maps); // this gives an error... ?
return maps; //no promise returned here so no chance to delay the function below
})
.then(function(maps){
//is this where i need to put my function ? doesn't delay on map load since no promise returned...
});
});
显然 maps 对象 return 由 uiGmapGoogleMapApi promise 与 maps 对象 return 由 [=16] 等事件编辑完全不同=] 等......相当混乱。
此外，the FAQ 仅指示如何使用 tilesloaded 获取地图实例 - 由于已经描述的原因，它不起作用。
正如 Sal Niro 在另一个答案中指出的那样 - 绕过 tilesloaded 或 idle 的不断调用的一个选择是定义一个变量，然后在第一个将其标记为 true时间 events 函数 运行。
API 无法在控制器内初始地图加载后访问地图对象，这有点古怪和令人惊讶……但它可以工作。
However - 添加这个答案是因为将整个控制器放在一个函数（或条件）中是不切实际的 - 而且有些函数你 可能 想被连续调用。因此，在调用地图之前，只需在控制器 中定义 'run once' 变量 。
解决方法:
定义一个变量（这里随便叫"initialMapLoad"）设置为false或0：
var initialMapLoad = 0
然后，在您的 google 地图事件定义（例如 tilesloaded、dragend 或 idle）中，您可以将您只想 运行一次，有条件的：
if(initialMapLoad === 0) {
my_single_run_function();
var initialMapLoad = 1
}
不要忘记将 initialMapLoad 变量重新定义为 1 或 true 一旦你的函数 运行s.
示例：
myApp.controller('MainCtrl', function($scope, uiGmapGoogleMapApi) {
var initialMapLoad = 0;
uiGmapGoogleMapApi
.then(function(maps){
$scope.map = {
center: {
latitude: 37.7749295,
longitude: -122.4194155
},
zoom: 13,
events: {
tilesloaded: function (maps, eventName, args) {
// functions that run every time
alert('I say this after every tile load');
if(initialMapLoad === 0){
// functions that run only once
alert('I only say this once' + maps.getBounds());
initialMapLoad = 1;
}
},
}
};
})
});
请参阅 this jsfiddle
中的工作示例
我认为'correct'方法是通过将uiGmapIsReady服务注入控制器来使用APIIsReady特性。参见 the documentation。
有了 uiGmapIsReady 承诺，就可以将 map 传递给功能/服务等，代码如下：
uiGmapIsReady.promise() // this gets all (ready) map instances - defaults to 1 for the first map
.then(function(instances) { // instances is an array object
var maps = instances[0].map; // if only 1 map it's found at index 0 of array
$scope.myOnceOnlyFunction(maps); // pass the map to your function
});
也可以通过 instances 数组迭代到每个地图上的 运行 函数（如果您的页面中加载了多个地图）：
uiGmapIsReady.promise() // this gets all (ready) map instances - defaults to 1 for the first map
.then(function(instances) { // instances is an array object
angular.forEach(instances, function(value, key) {
var maps = value.map;
$scope.myOnceOnlyFunction(maps); // will apply this function to each map
});
});
所以整个控制器看起来像
myApp.controller('MainCtrl', function($scope, uiGmapGoogleMapApi, uiGmapIsReady) {
uiGmapGoogleMapApi
.then(function(maps){
$scope.googlemap = {};
$scope.map = {
center: {
latitude: 37.7749295,
longitude: -122.4194155
},
zoom: 13,
pan: 1,
options: myAppServices.getMapOptions().mapOptions,
control: {},
events: {
tilesloaded: function (maps, eventName, args) {
},
dragend: function (maps, eventName, args) {
},
zoom_changed: function (maps, eventName, args) {
}
}
};
});
uiGmapIsReady.promise() // this gets all (ready) map instances - defaults to 1 for the first map
.then(function(instances) { // instances is an array object
var maps = instances[0].map; // if only 1 map it's found at index 0 of array
$scope.myOnceOnlyFunction(maps); // this function will only be applied on initial map load (once ready)
});
$scope.myOnceOnlyFunction = function(maps){ // this will only be run once on initial load
var center = maps.getCenter(); // examples of 'map' manipulation
var lat = center.lat();
var lng = center.lng();
alert('I\'ll only say this once ! \n Lat : ' + lat + '\n Lng : ' + lng);
};
});
jsfiddle
...不确定为什么未在常见问题解答中提及：建议使用“How do I access the map instance?' - or why using tilesloaded (which is thought to be unreliable) 而不是 idle 或 uiGmapIsReady... ?
也许常见问题解答的问题真的是“我如何持续访问地图”？
使用 angular-google-maps 将 google 地图合并到应用程序中
我需要一个命令，在初始地图加载完成后 运行 一个函数
- 但仅在初始加载时，不是在每次地图操作后
我不能使用 idle 或 tilesloaded，因为它们在每次移动后都会触发...
我想要的函数 运行 需要获取地图边界以在初始页面加载时从服务器拉取数据
- 我希望这在初始加载时发生一次，然后成为使用刷新的手动函数 map-control
- 如果我使用 idle 或 tilesloaded 触发它，它将在用户移动地图时 每次 提取服务器数据。
有谁知道如何在初始地图加载后触发一次性命令以获取地图详细信息（边界等）？
我试过将 maps.getBounds() 放在第二个 promise 函数中，但它不起作用。
注意，I've got a fiddle working here - 在定义了 $scope.map 控件/选项等后，我无法再链接任何承诺，因为它们没有 return 承诺：
文档中的代码示例未显示如何在定义 $scope.map 之后链接承诺 。
html
<div class="angular-google-map-container" ng-controller="MainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
</ui-gmap-google-map>
</div>
控制器
myApp.controller('MainCtrl', function($scope, uiGmapGoogleMapApi) {
uiGmapGoogleMapApi
.then(function(maps){
$scope.map = {
center: {
latitude: 37.7749295,
longitude: -122.4194155
},
zoom: 12
events: {
tilesloaded: function (maps, eventName, args) {
myServiceFuntion(maps) // this work fine but fires every time
},
dragend: function (maps, eventName, args) {
myServiceFuntion(maps) // this work fine but fires every time
},
zoom_changed: function (maps, eventName, args) {
myServiceFuntion(maps) // this work fine but fires every time
}
}
}
$scope.bounds = maps.getBounds() // this gives me 'getBounds() not a function'
myServiceFuntion(maps); // this gives an error... ?
return maps; //no promise returned here so no chance to delay the function below
})
.then(function(maps){
//is this where i need to put my function ? doesn't delay on map load since no promise returned...
});
});
显然 maps 对象 return 由 uiGmapGoogleMapApi promise 与 maps 对象 return 由 [=16] 等事件编辑完全不同=] 等......相当混乱。
此外，the FAQ 仅指示如何使用 tilesloaded 获取地图实例 - 由于已经描述的原因，它不起作用。
正如 Sal Niro 在另一个答案中指出的那样 - 绕过 tilesloaded 或 idle 的不断调用的一个选择是定义一个变量，然后在第一个将其标记为 true时间 events 函数 运行。
API 无法在控制器内初始地图加载后访问地图对象，这有点古怪和令人惊讶……但它可以工作。
However - 添加这个答案是因为将整个控制器放在一个函数（或条件）中是不切实际的 - 而且有些函数你 可能 想被连续调用。因此，在调用地图之前，只需在控制器 中定义 'run once' 变量 。
解决方法:
定义一个变量（这里随便叫"initialMapLoad"）设置为false或0：
var initialMapLoad = 0
然后，在您的 google 地图事件定义（例如 tilesloaded、dragend 或 idle）中，您可以将您只想 运行一次，有条件的：
if(initialMapLoad === 0) {
my_single_run_function();
var initialMapLoad = 1
}
不要忘记将 initialMapLoad 变量重新定义为 1 或 true 一旦你的函数 运行s.
示例：
myApp.controller('MainCtrl', function($scope, uiGmapGoogleMapApi) {
var initialMapLoad = 0;
uiGmapGoogleMapApi
.then(function(maps){
$scope.map = {
center: {
latitude: 37.7749295,
longitude: -122.4194155
},
zoom: 13,
events: {
tilesloaded: function (maps, eventName, args) {
// functions that run every time
alert('I say this after every tile load');
if(initialMapLoad === 0){
// functions that run only once
alert('I only say this once' + maps.getBounds());
initialMapLoad = 1;
}
},
}
};
})
});
请参阅 this jsfiddle
中的工作示例我认为'correct'方法是通过将uiGmapIsReady服务注入控制器来使用APIIsReady特性。参见 the documentation。
有了 uiGmapIsReady 承诺，就可以将 map 传递给功能/服务等，代码如下：
uiGmapIsReady.promise() // this gets all (ready) map instances - defaults to 1 for the first map
.then(function(instances) { // instances is an array object
var maps = instances[0].map; // if only 1 map it's found at index 0 of array
$scope.myOnceOnlyFunction(maps); // pass the map to your function
});
也可以通过 instances 数组迭代到每个地图上的 运行 函数（如果您的页面中加载了多个地图）：
uiGmapIsReady.promise() // this gets all (ready) map instances - defaults to 1 for the first map
.then(function(instances) { // instances is an array object
angular.forEach(instances, function(value, key) {
var maps = value.map;
$scope.myOnceOnlyFunction(maps); // will apply this function to each map
});
});
所以整个控制器看起来像
myApp.controller('MainCtrl', function($scope, uiGmapGoogleMapApi, uiGmapIsReady) {
uiGmapGoogleMapApi
.then(function(maps){
$scope.googlemap = {};
$scope.map = {
center: {
latitude: 37.7749295,
longitude: -122.4194155
},
zoom: 13,
pan: 1,
options: myAppServices.getMapOptions().mapOptions,
control: {},
events: {
tilesloaded: function (maps, eventName, args) {
},
dragend: function (maps, eventName, args) {
},
zoom_changed: function (maps, eventName, args) {
}
}
};
});
uiGmapIsReady.promise() // this gets all (ready) map instances - defaults to 1 for the first map
.then(function(instances) { // instances is an array object
var maps = instances[0].map; // if only 1 map it's found at index 0 of array
$scope.myOnceOnlyFunction(maps); // this function will only be applied on initial map load (once ready)
});
$scope.myOnceOnlyFunction = function(maps){ // this will only be run once on initial load
var center = maps.getCenter(); // examples of 'map' manipulation
var lat = center.lat();
var lng = center.lng();
alert('I\'ll only say this once ! \n Lat : ' + lat + '\n Lng : ' + lng);
};
});
jsfiddle
...不确定为什么未在常见问题解答中提及：建议使用“How do I access the map instance?' - or why using tilesloaded (which is thought to be unreliable) 而不是 idle 或 uiGmapIsReady... ?
也许常见问题解答的问题真的是“我如何持续访问地图”？