在初始地图加载之后，angular-google-maps运行函数ONCE [英] angular-google-maps run function ONCE after initial map load
问题描述
使用角度谷歌地图合并谷歌地图到一个应用程序
我需要一个命令，将在初始地图加载完成后运行一个函数ONCE
- 但仅限于初始加载， 不是在每个地图操作之后
我无法使用闲置或 tilesloaded ，因为这些会在每次移动后被触发...
我想运行的函数在初始页面加载时需要获取地图边界以将数据从服务器上拉出
- 我希望在初始加载时发生这种情况，然后使用刷新 map-control
- 如果我使用空闲或 tilesloaded 来触发它，服务器数据每个用户移动地图。
有谁知道如何触发一次性关闭命令来获取地图细节（边界等）在初始地图加载之后？
已经尝试在第二个promise函数中放置
maps.getBounds（），但它不起作用。 我在这里有一把小提琴 - 我不能在 $ scope.map controls / options等被定义，因为它们没有返回一个承诺：
docs不显示如何在定义 html 控制器 很显然， 此外，常见问题解答仅指示如何使用 $ scope.map 之后链接承诺。
< div class =angular-google- map-containerng-controller =MainCtrl>
< / div>
myApp.controller（'MainCtrl'，function（$ scope，uiGmapGoogleMapApi）{
uiGmapGoogleMapApi
.then（function（maps）{
$ scope.map = {
中心：{
latitude：37.7749295，
longitude：-122.4194155
}，
zoom：12
events：{
tilesloaded：function（maps， eventName，args）{
myServiceFuntion（maps）//这个工作正常但每次触发
}，
dragend：function（maps，eventName，args）{
myServiceFuntion（maps ）//这个工作正常，但每次都会触发
}，
zoom_changed：function（maps，eventName，args）{
myServiceFuntion（maps）//这个工作正常但每次触发
}
}
}
$ scope.bounds = maps.getBounds（）//这让我'getBounds（）不是函数'
myServiceFuntion（maps）; //这给出了一个错误...？
返回地图; //没有承诺在这里返回，所以没有机会延迟低于
}）
.then（函数（地图）{
//这是我需要把我的功能吗？doesn' t延迟地图加载，因为没有承诺返回...
}）;
}）;
tilesloaded maps 对象完全不同等等...很混乱。
tilesloaded 来获取地图实例 - 由于已经描述的原因，这不起作用。
我相信'正确'的方法是使用API IsReady 特性，方法是注入 uiGmapIsReady 服务到控制器中。请参阅文档。
使用 uiGmapIsReady promise可以将 map 传递给一个函数/服务等，如下所示：
uiGmapIsReady.promise（）//获取所有（就绪）地图实例 - 默认为1对于第一个映射
.then（函数（实例）{//实例是一个数组对象
var maps = instances [0] .map; //如果只有一个映射位于数组的索引0
$ scope.myOnceOnlyFunction（maps）; //将地图传递给你的函数
}）;
也可以遍历实例数组在每个地图上运行函数（如果您的页面中加载了多个地图）：
$ b $ pre $ uiGmapIsReady.promise（） （实例）{//实例是一个数组对象
angular.forEach（实例，函数（值）//获取所有（就绪）映射实例 - 对于第一个映射，默认值为1
.then ，key）{
var maps = value.map;
$ scope.myOnceOnlyFunction（maps）; //将该函数应用于每个映射
}）;
}）;
那么整个控制器看起来就像
< pre $ 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（） （获取所有（就绪）映射实例 - 对于第一个映射，默认为1
.then（function（instances）{// instances是一个数组对象
var maps = instances [0] .map ; //如果只有1个映射，它在数组
$ scope.myOnceOnlyFunction（maps）的索引0处被找到。 //这个函数只适用于初始地图加载（一旦准备就绪）
}）;
$ scope.myOnceOnlyFunction = function（maps）{//这只会在初始加载时运行一次
var center = maps.getCenter（）; //'map'操作的例子
var lat = center.lat（）;
var lng = center.lng（）;
alert（'我只会说一次！\\\
Lat：'+ lat +'\\\
Lng：'+ lng）;
};
}）;
jsfiddle
...不知道为什么在FAQ中没有提到这一点： '如何访问地图实例？ ' - 或为什么使用 tilesloaded （），而不是空闲或 uiGmapIsReady ...？
也许常见问题真的是' 我如何连续访问地图 '？
using angular-google-maps to incorporate a google map into an app
I need a command that will run a function ONCE after initial map load is complete
- but only on the initial load, not after each map manipulation
I can't use idle or tilesloaded since these are fired after every movement...
The function I want to run needs to get map bounds to pull data off a server on initial page load
- i want this to occur ONCE on initial load, then be a manual function using a refresh map-control
- if i use idle or tilesloaded to fire this it will pull server data every time a user moves the map.
Does anyone know how to fire a once off command to get map details (bounds etc) after initial map load ?
I've tried putting maps.getBounds() in the 2nd promise function but it doesn't work.
Note, I've got a fiddle working here - I just can't chain any more promises after the $scope.map controls / options etc are defined because they don't return a promise:
The code example in the docs doesn't show how to chain a promise after the $scope.map is defined.
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>
controller
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...
});
});
Obviously the maps object returned by the uiGmapGoogleMapApi promise is completely different to the maps object returned by events like tilesloaded etc... quite confusing.
Also, the FAQ only indicates how to use tilesloaded to get the map instance - which doesn't work for reasons already described.
The 'correct' method I believe is to use the API IsReady feature by injecting the uiGmapIsReady service into the controller. See the documentation.
With the uiGmapIsReady promise it's then possible to pass the map to a function / service etc with code like:
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
});
it's also possible to iterate through the instances array to run functions on each map (if you have more than one map loaded in your page):
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
});
});
so then the whole controller would look like
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
...not sure why this isn't mentioned in the FAQ: 'How do I access the map instance?' - or why using tilesloaded (which is thought to be unreliable) is suggested instead of idle or uiGmapIsReady... ?
Perhaps the FAQ question was really 'how do i access the map on a continual basis' ?
这篇关于在初始地图加载之后，angular-google-maps运行函数ONCE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
