用js閉包的方法實作多點標註冒泡範例_javascript技巧

這兩天在做地圖這塊，一點點js程式碼，各種坑。第一次接觸js，各種難，以下就這幾天的研究做一些總結，求坑
在事件監聽器中使用閉包

在執行事件監聽器時，通常可取的做法是將私有資料和持久性資料附加到物件中。 JavaScript 不支援「私有」實例數據，但支援允許內部函數存取外部變數的閉包。在事件監聽器中，閉包非常適用於存取通常不附加到發生事件的物件的變數。

以下範例在事件監聽器中使用了函數閉包將加密訊息分配給一組標記。點擊每個標記將會看到加密訊息的一部分，該訊息並不包含在標記本身內。

複製程式碼 程式碼如下:

var map;
function infunction( 🎜>var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng>; 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() - south.Clat(latlat)(lat) );
for (var i = 0; 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)
size: new google.maps.Size(50,50)
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}

這段程式碼是從google官方裡面複製下來的

接下來我要實現從資料庫中讀取經緯度、地址信息，在google map上進行標註並單擊標註出現信息

要實現多點標註，以上程式碼可以參考

複製程式碼 程式碼如下:

cs後端程式碼： 複製程式碼

複製程式碼



複製程式碼



複製程式碼



複製程式碼



複製程式碼



複製程式碼



複製程式碼



複製程式碼 程式碼如下:


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.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, EventsArgs)

string mycnnConnectionString1 = System.Configuration.ConfigurationManager.ConnectionStrings["testconect"].ConnectionString; //建立連線字串
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 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"];///資料庫讀取float型的資料要用double ln[k3] = buf3; k3 ; //id buf4 = (int)dr1["L_ID"]; id[k4] = buf4; k4 ; buf1 = dr1["L_Address"].ToString(); addr[k1] = buf1; k1 ; } number = k4; dr1.Close( ); mycnn1.Close(); } }