Load locations from two-dimensional array into bMap (a google maps for jQuery plugin)
I am using bMap jQuery plugin to ease up the process of working with Google Maps on my site. The way to load markers to the GoogleMap is using the following method.
$('#map').data('bMap').insertMarkers({
"name":"Markers",
"data":[
{
"lat":51.49757618329838,
"lng":-0.1746654510498047,
"title":"Science Museum",
"body":"Exhibition Road, London SW7"
},{
"lat":51.47769451182406,
"lng":-0.0009441375732421875,
"title":"Royal Observatory Greenwich",
"body":"Blackheath Ave, Greenwich, London SE10"
}
]
});
However, I am load the locations from an array like this:
MultiArray = new Array(2)
MultiArray [0] = new Array(4)
MultiArray [0][0] = "51.3149757618329838"
MultiArray [0][1] = "-0.1249757618329838"
MultiArray [0][2] = "Science Museum"
MultiArray [0][3] = "Exhibition Road, London SW7"
MultiArray [1] = new Array(4)
MultiArray [1][0] = "51.47769451182406"
MultiArray [1][1] = "-0.0009441375732421875"
MultiArray [1][2] = "Royal Observatory Greenwich"
MultiArray [1][3] = "Blackheath Ave, Greenwich, Lond开发者_JAVA技巧on SE10"
MultiArray [2] = new Array(4)
MultiArray [2][0] = "52.4756451182406"
MultiArray [2][1] = "-0.0009441323532421875"
MultiArray [2][2] = "Broadwalk College"
MultiArray [2][3] = "Springfield Ave, Greenwich, London SE10"
As in, If the array has 10 items, all 10 items to the map. This might be a generic javascript question. But I've been misled down the JSON path in this, so I would like to know if there is another way.
Is there any way to do this? I know if I use php, and read the locations of the database, I can generate such javascript on the fly. But I don't have this luxury. I have an javascript variable thats an array of locations that I would like to load into the map using the first function.
this is completely possible. Instead of using your MultiArray and individually added array elements I've just added a function to add to the array (instead of manually adding [0][1] etc.)
Untested as usual, hope it helps!
//global mapData variable
var mapData = [];
//example function to add a location to mapData
function addLocation(lat,lng,title,body){
//push the new Object
mapData.push({
'lat':lat,
'lng':lng,
'title':title,
'body':body
});
}
//example function to actually call your insertMarkers jQuery
function insertMarkers(){
$('#map').data('bMap').insertMarkers({
"name":"Markers",
"data": mapData
});
}
//example, add a location to mapData
addLocation("51.3149757618329838",
"-0.1249757618329838",
"Science Museum",
"Exhibition Road, London SW7"
);
//example, add another location to mapData
addLocation("51.47769451182406",
"-0.0009441375732421875",
"Royal Observatory Greenwich",
"Blackheath Ave, Greenwich, London SE10"
);
//example, call the insertMarkers function (or just replace with your
//own insertMarkers using the mapData object.
insertMarkers();
Since you specifically asked though how to translate your two dimensional array into the data that you want to provide to your map function, here ya go.
//Your array
var MultiArray = new Array(2)
MultiArray [0] = new Array(4)
MultiArray [0][0] = "51.3149757618329838"
MultiArray [0][1] = "-0.1249757618329838"
MultiArray [0][2] = "Science Museum"
MultiArray [0][3] = "Exhibition Road, London SW7"
// how to loop and just use the insertLocation function
// provided above
// I really don't recommend this, if you can output the array directly
// you might as well just use the "addLocation" function (or your own variety)
// directly
for(var i = 0; i<MultiArray.length; i++){
addLocation(
MultiArray[i][0],
MultiArray[i][1],
MultiArray[i][2],
MultiArray[i][3]
);
}
Additionally you could avoid all the nonsense and do this (I don't really like it and tend to want to encapsulate stuff like this in a function.)
var MultiArray = [];
MultiArray.push({
"lat": "51.3149757618329838",
"lng": "-0.1249757618329838",
"title": "Science Museum",
"body": "Exhibition Road, London SW7"
});
$('#map').data('bMap').insertMarkers({
"name":"Markers",
"data": MultiArray
});
精彩评论