开发者

Load locations from two-dimensional array into bMap (a google maps for jQuery plugin)

开发者 https://www.devze.com 2023-01-28 18:05 出处:网络
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.

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
    });
0

精彩评论

暂无评论...
验证码 换一张
取 消