JavaScript function does not push object to a global array variable
EDITED: The problem is with the function 'find_callback', I want to insert each of the responses to a global array named responseArray. the response is an array of objects.
I'm trying to add markers to the Waze implementation of OpenLayers from an array of searches. I want to run multiple searches, accumulating the results. I use 3 functions, onInit()
, find_callback()
and addPoint()
. Calling the 'find_callback' function overrides the previous markers. If I run a single search:
g_wzae_map.find('THE LOCATION', 'find_callback');
The response:
/* array of search results (up to 10) sorted by relevancy */
[ {
//bounds that contain the this map feature (set map to this extent for closest zoom)
"bounds":{"bottom":32.0880470275879,
"left":34.7883338928223,
"right":34.7912673950195,
"top":32.0854721069336},
//location of the feature
"location":{"lat":32.08560397003471,"lon":34.78999763465419},
//name of feature
"name":"Street, City"
},
//up to 9 more results
// ...
]
The code as it is
function addPoint(response){
var first_result = response;
var lon = first_result.location.lon;
var lat = first_result.location.lat;
map.setCenter(new OpenLayers.LonLat(lon,lat));
var markersPoint = new OpenLayers.Layer.Markers( "Markers" );
markersPoint.addMarker(
new OpenLayers.Marker(
new OpenLayers.LonLat(
lon,
lat
),
icon.clone()
)
);
g_waze_map.map.addLayer(markersPoint);
map.addPopup(
new OpenLayers.Popup.FramedCloud(
"point_"+first_result.location.lat,
new OpenLayers.LonLat(lon,lat),
null,
"<div style='font-family:Arial,sans-serif;font-size:0.8em;'>"
+first_result.name+"<div>",
anchor=null,
true,
null
)
);
}
//called when map loads
function onInit(){
map = g_waze_map.map;
size = new OpenLayers.Size(15, 20);
offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
icon = new OpenLayers.Icon('http://www.waze.co.il/images/home.png',size,offset);
// array for the points
responseArray = new Array();
// find callback
find_callback = function(response){
f开发者_运维问答or (var i=0, length = response.length; i<length; i++){
responseArray.push(response[i]);
}
// alert(responseArray[0]); // working, getting an object
}
// alert(responseArray[0]); // not working, getting 'undefined'
//search API example, calls 'find_callback' when search returns
g_waze_map.find('Turin','find_callback');
g_waze_map.find('Rome','find_callback', true);
// adding the points
for (var i=0, length = responseArray.length; i<length; i++){
addPoint(responseArray[i]);
}
};
Thanks!
g_waze_map.find()
is asynchronous, which is why it uses a callback to process results. When find
returns, the search results probably aren't available. Instead of calling addPoint
from onInit
, call it directly in find_callback
.
find
loads search results in another page, which might be storing the results as a global variable that gets clobbered when later calls reload the page (see why globals are bad?). If that's the case, you can move all but the first call to find
to the find
callback.
//called when map loads
function onInit(){
var map = g_waze_map.map;
var size = new OpenLayers.Size(15, 20);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.waze.co.il/images/home.png',size,offset);
function addPoint(response){
var first_result = response;
var lon = response.location.lon;
var lat = response.location.lat;
//g_waze_map.map.setCenter(new OpenLayers.LonLat(lon,lat));
var markersPoint = new OpenLayers.Layer.Markers( "Markers" );
markersPoint.addMarker(
new OpenLayers.Marker(
new OpenLayers.LonLat(lon, lat),
icon.clone()
) );
g_waze_map.map.addLayer(markersPoint);
g_waze_map.map.addPopup(
new OpenLayers.Popup.FramedCloud(
"point_"+lat, new OpenLayers.LonLat(lon,lat), null,
"<div style='font-family:Arial,sans-serif;font-size:0.8em;'>"+response.name+"<div>",
null, true, null
) );
}
// array for the points; this could be dropped
var responseArray = [];
function addPoints(response) {
// if you want to save the responses for other purposes
Array.push.apply(responseArray, response);
for (var i=0, length = response.length; i<length; i++){
addPoint(response[i]);
}
}
var terms = ['Rome'];
window.find_callback = function(response){
addPoints(response);
if (terms.length) {
g_waze_map.find(terms.pop(),'find_callback', true);
}
}
g_waze_map.find('Turin','find_callback');
};
精彩评论