Google Maps addListener and Jquery weird behavior
This is weird, perhaps someone can explain to me why this happens.
If I use the commented out for
in place of the .each()
then every marker displays the last storeObj's info when clicked. However it seems when using the .each() its good. All the markers are places where they should be on either, its just the click listener.
PS: If you want the full source code then just visit this URL: http://tinyurl.com/38x6yfe
//for(index=0; index < store_array.length; index++) {
$(store_array).each(function(index, this_store){
//name address address2 csz state phone lng lat accuracy brands
// 0 1 2 3 4 5 6 7 8 9
/*
use this for FOR statement
var name = store_array[index][0]
name = name.replace(/\&/g,'&');
var address = store_array[index][1];
var address2 = store_array[index][2];
var csz = store_array[index][3];
var state = store_array[index][4];
var phone = store_array[index][5];
var lng = store_array[index][6];
var lat = store_array[index][7];
//var accuracy = store_array[index][8];
var brands = store_array[index][9];
*/
var name = this_store[0]
name = name.replace(/\&/g,'&');
var address = this_store[1];
var address2 = this_store[2];
var csz = this_store[3];
var state = this_store[4];
var phone = this_store[5];
var lng = this_store[6];
var lat = this_store[7];
//var accuracy = this_store[8];
var brands = this_store[9];
var latlng = new google.maps.LatLng(lat, lng);
var storeObj = new google.maps.Marker({
position: latlng,
icon: gicons[brands],
shadow: iconShadow,
map: G_MAP,
visible: false,
title: name,
zIndex: Math.round(lat * -100000) << 5
});
storeObj.id = index;
storeObj.name = name;
storeObj.state = state;
storeObj.brands = brands;
//add this store into the stores array
G_STORES_ARRAY.push(storeObj);
console.log('index =' + index + ' name = ' + name + ' storeObj = ');
console.log(storeObj);
//create a listener for each store
google.maps.event.addListener(storeObj, 'click', function () {
//G_MAP.setCenter(latlng);
console.log('index =' + index + ' name = ' + name + ' storeObj = ');
console.log(storeObj);
var contentString = "<b>" + name + "<\/b><p>" + address + "<p>" + csz+ "<p>" + phone;
var urlstring = encodeURIComponent(name+' '+address+' '+csz);
contentString += '<br><a href="http://maps.google.com/?q='+urlstring+'" target="_blank">Directions</a>';
contentString += ' - <a href="javascript:G_MAP.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); G_MAP.setZoom(13);">Zoom To</a>';
contentString += ' - <a href="javascript:G_MAP.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); G_MAP.setZoom(parseInt(G_MAP.getZoom())+1);">[+]</a>';
contentStrin开发者_Go百科g += ' - <a href="javascript:G_MAP.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); G_MAP.setZoom(parseInt(G_MAP.getZoom())-1);">[-]</a>';
G_INFOWINDOW.setContent(contentString);
G_INFOWINDOW.open(G_MAP, storeObj);
});
google.maps.event.addListener(storeObj, 'mouseover', function () {
storeObj.setIcon(gicons["none"]);
});
google.maps.event.addListener(storeObj, 'mouseout', function () {
storeObj.setIcon(gicons[storeObj.brands]);
});
});
});
To understand why this happens you will want to read up on closures in javascript. Here is a Google Maps API specific example, a more official description, and an explanation of how they're implemented in jQuery's .each() function
精彩评论