Using js closure method to implement multi-point label bubbling example_javascript skills

I have been working on the map for the past two days, with a little js code and various pitfalls. It’s the first time I come into contact with js. It’s all kinds of difficulties. Here’s a summary of my research over the past few days. Looking for pitfalls
Using closures in event listeners

When executing event listeners, it’s usually advisable. This is done by attaching private and persistent data to the object. JavaScript does not support "private" instance data, but does support closures that allow inner functions to access outer variables. In event listeners, closures are great for accessing variables that are not normally attached to the object on which the event occurs.

The following example uses a function closure in an event listener to assign an encrypted message to a set of tags. Clicking on each marker will reveal a portion of the encrypted message that is not contained within the marker itself.

Copy code 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 is copied from Google official website

Next, I want to read the longitude, latitude and address information from the database, mark it on Google Map and click the mark to appear Information

To achieve multi-point annotation, the above code can refer to

Copy the code The code is as follows:

cs backend code:

Copy Code The code is as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web ;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
public partial class Default2 : System.Web.UI.Page
{
public double[] la = new double[25];
public double[] ln = new double[25];
public int[] id = new int[25];
public string[] addr = new string[25];
public int number;


protected void Page_Load(object sender, EventArgs e)
{
string mycnnConnectionString1 = System.Configuration.ConfigurationManager.ConnectionStrings["testconect"].ConnectionString; //Create connection string
SqlConnection mycnn1 = new SqlConnection(mycnnConnectionString1);
mycnn1 .Open();
SqlCommand cmd1 = new SqlCommand("select L_ID,L_Lantitude,L_Longitude,L_Address from LatestPosition ", mycnn1);
SqlDataReader dr1 = cmd1.ExecuteReader();
int k2 = 0;
int k3 = 0;
int k4 = 0;
int k1 = 0;
// string buf1 = "";
double buf2 = 0;
double buf3 = 0 ;
int buf4 = 0;
string buf1 = "0";
while (dr1.Read())
{
//lat
buf2 = (double)dr1[ "L_Lantitude"];
la[k2] = buf2;
k2 ;
//lng
buf3 = (double)dr1["L_Longitude"];///Database reads float type The data needs to be double
ln[k3] = buf3;
k3;
//id
buf4 = (int)dr1["L_ID"];
id[k4] = buf4;
k4;
buf1 = dr1["L_Address"].ToString();
addr[k1] = buf1;
dr1.Close();
mycnn1.Close();

}


}