js 클로저 메소드를 사용하여 다중 지점 라벨 버블링 example

js 클로저 메소드를 사용하여 다중 지점 라벨 버블링 example_javascript 기술 구현

WBOY

풀어 주다： 2016-05-16 16:46:30

원래의

1231명이 탐색했습니다.

저는 지난 이틀 동안 약간의 js 코드와 다양한 함정을 안고 지도 작업을 해왔습니다. 처음으로 js를 접하게 되었는데, 여러가지 어려움이 있습니다. 지난 며칠간 연구한 내용을 요약하면 다음과 같습니다. 함정 찾기
이벤트 리스너에서 클로저 사용

, 이는 일반적으로 개인용 영구 데이터를 객체에 첨부하여 수행하는 것이 좋습니다. JavaScript는 "비공개" 인스턴스 데이터를 지원하지 않지만 내부 함수가 외부 변수에 액세스할 수 있도록 허용하는 클로저를 지원합니다. 이벤트 리스너에서 클로저는 이벤트가 발생하는 객체에 일반적으로 연결되지 않는 변수에 액세스하는 데 적합합니다.

다음 예에서는 이벤트 리스너의 함수 클로저를 사용하여 암호화된 메시지를 태그 세트에 할당합니다. 각 마커를 클릭하면 마커 자체에 포함되지 않은 암호화된 메시지의 일부가 표시됩니다.

코드 복사 코드는 다음과 같습니다.

 
var map 
function 초기화( ) { 
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) 

// 5개의 마커를 지도에 추가하세요. 임의의 위치 
var southWest = new google.maps.LatLng(-31.203405,125.244141); 
var northEast = new google.maps.LatLng(-25.363882,131.044922)
varbounds = new google. map.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({ 
위치: 위치, 
지도: 지도 
}); 🎜>var j = i 1; 
marker.setTitle(j.toString()); 
attachSecretMessage(marker, i) 
} 

// 
// 마커를 클릭하면 비밀 메시지가 표시되지만 해당 메시지는 마커의 인스턴스 데이터 내에 없습니다. 
function attachmentSecretMessage(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); 
}); } 

 
이 코드는 Google 공식 홈페이지에서 복사한 것입니다. 

다음으로 데이터베이스에서 경도, 위도, 주소 정보를 읽어서 Google 지도에 표시하고 표시를 클릭하겠습니다. 표시 정보

다중 지점 주석을 달성하려면 위의 코드는

코드 복사 를 참조할 수 있습니다. 코드는 다음과 같습니다.

 
cs 백엔드 코드: 

코드 복사

코드는 다음과 같습니다.

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

System.Web.UI.HtmlControls 사용; .Data.SqlClient; 
public 부분 클래스 Default2 : System.Web.UI.Page 
{ 
public double[] la = new double[25] 
public double[] ln = new double [25]; 
 공개 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; //연결 문자열 생성 
SqlConnection mycnn1 = new SqlConnection(mycnnConnectionString1 ); 
mycnn1 .Open(); 
SqlCommand cmd1 = new SqlCommand("LatestPosition에서 L_ID,L_Lantitude,L_Longitude,L_Address 선택", mycnn1); >int k2 = 0; 
int k3 = 0; 
int k1 = 0 
// string buf1 = ""; 🎜>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"];/// 데이터베이스는 부동 소수점 형식을 읽습니다. 
ln[k3] = buf3; 
k3 
//id 
buf4 = (int)dr1["L_ID"] 
id [k4] = buf4; 
buf1 = dr1["L_Address"].ToString(); 
addr[k1] = buf1; 
mycnn1 .닫기(); 

} 


} 