나는 이틀, 약간의 JS 코드 및 다양한 함정을지도에서 작업 해 왔습니다. 처음으로 JS와 접촉했을 때 모든 종류의 어려움이 있습니다. 지난 며칠 동안 일부 연구를 요약하고 트릭을 요청합시다.
이벤트 청취자에서 클로저를 사용하십시오
이벤트 리스너를 실행할 때는 종종 개인 및 지속적인 데이터를 객체에 첨부하는 것이 바람직합니다. JavaScript는 "개인"인스턴스 데이터를 지원하지 않지만 내부 기능이 외부 변수에 액세스 할 수있는 클로저를 지원합니다. 이 경우 청취자는 일반적으로 발생하는 객체에 첨부되지 않은 변수에 액세스하는 데 이상적입니다.
다음 예제는 이벤트 리스너의 함수 폐쇄를 사용하여 암호화 된 메시지를 태그 세트에 할당합니다. 각 태그를 클릭하면 태그 자체에 포함되지 않은 암호화 된 메시지의 일부가 표시됩니다.
코드 사본은 다음과 같습니다.
var지도;
function initialize () {
var mylatlng = new Google.maps.latlng (-25.363882,131.044922);
var mapoptions = {
줌 : 4,
센터 : 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);
var bounds = new Google.maps.latlngbounds (남서부, 북동부);
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 마커 = 새로운 Google.maps.marker ({
위치 : 위치,
지도 :지도
});
var j = i + 1;
Marker.settitle (j.toString ());
AttachSecretMessage (마커, i);
}
}
// 5 마커가 클릭하면 비밀 메시지를 보여줍니다.
// 그러나 해당 메시지는 마커의 인스턴스 데이터 내에 없습니다.
함수 attachSecretMessage (마커, 번호) {
var message = [ "this", "is", "the", "secret", "message"];
var infowindow = new Google.maps.infowindow (
{내용 : 메시지 [번호],
크기 : 새로운 Google.maps.size (50,50)
});
google.maps.event.addlistener (마커, '클릭', function () {
Infowindow.open (지도, 마커);
});
}
이 코드는 Google 공무원에서 복사되었습니다
다음으로, 위도와 경도를 읽고 데이터베이스의 정보를 주소화하고 Google지도에 표시하고 클릭하여 표시를 표시하고 싶습니다.
다중 점 주석을 구현하려면 위의 코드를 참조 할 수 있습니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
var지도;
Window.onload = function load () {
var number = '< %= 숫자 %>'; // 배경 cs에서 pubilc 수의 값을 얻습니다.
var 주소 = 새로운 배열 ()
var weidu = 새로운 배열 ();
var jingdu = 새로운 배열 ();
var chepai = 새로운 배열 ();
< % (int i = 0; i <번호; i ++) { %>
weidu.push ( '<%= lan [i]%>'); // 배경 CS에서 위도와 경도 값을 얻습니다.
jingdu.push ( '<%= lon [i]%>');
address.push ( '<%= addr [i]%>');
chepai.push ( '< %= carnum [i] %>');
// var wei;
// wei = chepai [ '<%= i%>'];
// 경고 (WEI);
< %} %>
var latlng = new Google.maps.latlng (Weidu [0], Jingdu [0]);
// var mylatlng = new Google.maps.latlng (25.273566, 110.290195);
var myoptions = {
줌 : 8,
센터 : latlng,
MapTypeid : google.maps.maptypeid.roadmap
};
map = new Google.maps.map (Document.GetElementById ( "MAP_CANVAS"), 근시); //// 맵 인스턴스 초기화
for (var j = 0; j <number; j ++) // 나는 오랫동안 여기에 붙어 있습니다. js 유형은 var이기 때문입니다. 나는 JS와 CS를 혼란스럽게하고 " % %>까지 사용했습니다. 실제로 간단한 JS가 필요하지 않으며 C와 거의 동일합니다.
{
var lat = weidu [j];
var lng = jingdu [j];
var 주소 = 주소 [j];
var chepaihao = chepai [j];
// 경고 (j);
// 경고 (LAT);
// var image = 'image/webcam.png';
// 플래그 포인트를 설정합니다
var mylatlng = new google.maps.latlng (weidu [j], jingdu [j]);
var h = Chepaihao;
var tit = h.tostring ();
var 마커 = 새로운 Google.maps.marker ({
위치 : mylatlng,
지도 :지도,
// 아이콘 : "http://google-maps-icons.googlecode.com/files/yellow08.png",
// 아이콘 : 이미지, // 아이콘을 통해 표시 할 아이콘을 설정할 수 있습니다. 설정하지 않으면 Google지도의 기본 아이콘이 표시됩니다.
제목 : title // 제목은 마커를 마커에 넣어 마커에 표시 할 값을 의미합니다.
});
AttachSecretMessage (Marker, J, Addre, Lat, Lng);
}
}
함수 att
// var message = [ "this", "is", "the", "secret", "message"];
var infowindow = new Google.maps.infowindow (
{내용 : "<span style = 'font-size : 15px'> <b> 주소 : </b>" + addre1 + "<brre1 +" + "위도 및 경도 :" + lat1 + "," + lng1 + "</span>",
크기 : 새로운 Google.maps.size (50, 50)
});
// infowindow.setContent ( "주소 :" +addre1 +"longitude :" +lat1 +"lat :" +lng1);
// 팝업 정보 창을 클릭하십시오
google.maps.event.addlistener (마커, '클릭', function () {
Infowindow.open (지도, 마커);
});
}
</스크립트>
CS 백엔드 코드 :
코드 사본은 다음과 같습니다.
시스템 사용;
System.collections.generic 사용;
System.linq 사용;
System.Web 사용;
system.web.ui 사용;
system.web.ui.webcontrols 사용;
system.web.ui.htmlcontrols 사용;
system.data.sqlclient 사용;
공용 부분 클래스 기본값 2 : System.Web.ui.Page
{
Public Double [] LA = New Double [25];
public double [] ln = 새로운 이중 [25];
public int [] id = new int [25];
공개 문자열 [] addr = 새 문자열 [25];
공개 INT 번호;
보호 된 void page_load (객체 발신자, EventArgs e)
{
문자열 mycnnconnectiontring1 = system.configuration.configurationManager.connectiontrings [ "TestConect"]. ConnectionString; // 연결 문자열을 만듭니다
sqlconnection mycnn1 = 새로운 sqlconnection (mycnnconnectionstring1);
mycnn1.open ();
sqlcommand cmd1 = 새로운 sqlcommand ( "select l_id, l_lantitude, l_longitude, l_address에서 l_address", mycnn1);
sqldataReader dr1 = cmd1.executereader ();
int k2 = 0;
int k3 = 0;
int k4 = 0;
int k1 = 0;
// String buf1 = "";
이중 buf2 = 0;
이중 BUF3 = 0;
int buf4 = 0;
문자열 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;
K4 ++;
buf1 = dr1 [ "l_address"]. toString ();
addr [k1] = buf1;
K1 ++;
}
숫자 = k4;
dr1.close ();
mycnn1.close ();
}
}