How to use javascript closure to implement multi-point labeling bubble example _ javascript skills

This article mainly introduces how to use the js closure method to realize multi-point labeling and bubbling. If you need it, you can refer to the two days of map creation, a little js Code and various pitfalls. The first time I came into contact with js, I had various difficulties. Next I will make some conclusions on the research over the past few days to find the difficulties.
Use closures in Event Listeners

When executing an event listener, you can usually append private data and persistent data to an object. JavaScript does not support "private" instance data, but allows internal functions to access the closure of external variables. In event listeners, closures are very suitable for accessing variables that are usually not appended to objects where events occur.

The following example uses a function closure in the event listener to allocate encrypted messages to a group of tags. Click each tag to view a part of the encrypted message, which is not included in the tag.

The Code is as follows:

Var map;
Function initialize (){
Var myLatlng = new google. maps. LatLng (-25.363882, 131.044922 );
Var mapOptions = {
Zoom: 4,
Center: myLatlng,
MapTypeId: google. maps. MapTypeId. ROADMAP
}

Map = new google. maps. Map (document. getElementById ("map_canvas"), mapOptions );

// Add 5 markers to the map at random locations.
Var southWest = new google. maps. LatLng (-31.203405, 125.244141 );
Var northEast = new google. maps. LatLng (-25.363882, 131.044922 );
Var bounds = new google. maps. LatLngBounds (southWest, northEast );
Map. fitBounds (bounds );
Var lngSpan = northEast. lng ()-southWest. lng ();
Var latSpan = northEast. lat ()-southWest. lat ();
For (var I = 0; I <5; I ++ ){
Var location = new google. maps. LatLng (southWest. lat () + latSpan * Math. random (),
SouthWest. lng () + lngSpan * Math. random ());
Var marker = new google. maps. Marker ({
Position: location,
Map: map
});
Var j = I + 1;
Marker. setTitle (j. toString ());
AttachSecretMessage (marker, I );
}
}

// The five markers show a secret message when clicked
// But that message is not within the marker's instance data.
Function attachSecretMessage (marker, number ){
Var message = ["This", "is", "the", "secret", "message"];
Var infowindow = new google. maps. InfoWindow (
{Content: message [number],
Size: new google. maps. Size (50, 50)
});
Google. maps. event. addListener (marker, 'click', function (){
Infowindow. open (map, marker );
});
}

This code was copied from the google official website.

Next, I want to read the latitude and longitude information and address information from the database, mark the information on google map, and click the information that appears.

To implement multi-point tagging, refer to the above Code

The Code is as follows: