مثال على فقاعة وضع العلامات متعددة النقاط باستخدام طريقة إغلاق JS

لقد كنت أعمل على الخريطة في هذين اليومين ، القليل من رمز JS ، ومخاطر مختلفة. في المرة الأولى التي أتصل بها مع JS ، هناك كل أنواع الصعوبات. دعنا نلخص البحث في الأيام القليلة الماضية ، وطلب الحيل.

استخدم الإغلاق في مستمعي الأحداث

عند تنفيذ مستمعي الأحداث ، غالبًا ما يكون من المرغوب فيه إرفاق البيانات الخاصة والمستمرة بالكائن. لا تدعم JavaScript بيانات المثيلات "الخاصة" ، ولكنها تدعم عمليات الإغلاق التي تسمح للوظائف الداخلية بالوصول إلى المتغيرات الخارجية. في مستمعي الأحداث ، تعد عمليات الإغلاق مثالية للوصول إلى المتغيرات التي لا يتم ربطها عادة بالكائنات التي تحدث.

يستخدم المثال التالي إغلاق دالة في مستمع الحدث لتعيين الرسائل المشفرة إلى مجموعة من العلامات. سيؤدي النقر فوق كل علامة إلى رؤية جزء من الرسالة المشفرة التي لم يتم تضمينها في العلامة نفسها.

نسخة الكود كما يلي:

خريطة فار

تهيئة الدالة () {

var mylatlng = new Google.Maps.latlng (-25.363882،131.044922) ؛

var mapoptions = {

التكبير: 4 ،

المركز: mylatlng ،

maptypeid: google.maps.maptypeid.roadmap

}

MAP = جديد google.maps.map (document.getElementById ("map_canvas") ، mapOptions) ؛

// إضافة 5 علامات إلى الخريطة في مواقع عشوائية.

var southwest = جديد google.maps.latlng (-31.203405،125.244141) ؛

var northast = new Google.Maps.latlng (-25.363882،131.044922) ؛

var bounds = جديد google.maps.latlngbounds (الجنوب الغربي ، الشمال الشرقي) ؛

map.fitbounds (الحدود) ؛

var lngspan = northeast.lng () - southwest.lng () ؛

var latspan = northast.lat () - southwest.lat () ؛

لـ (var i = 0 ؛ i <5 ؛ i ++) {

var location = جديد google.maps.latlng (southwest.lat () + latspan * math.random () ،

southwest.lng () + lngspan * math.random ()) ؛

var marker = جديد google.maps.marker ({

الموقف: الموقع ،

الخريطة: الخريطة

}) ؛

var j = i + 1 ؛

Marker.Settitle (J.ToString ()) ؛

includeSecretMessage (علامة ، i) ؛

}

}

// تُظهر العلامات الخمسة رسالة سرية عند النقر عليها

// لكن هذه الرسالة ليست ضمن بيانات مثيل العلامة.

وظيفة excensecretmessage (علامة ، رقم) {

message var = ["this" ، "is" ، "the" ، "secret" ، "message"] ؛

var infoWindow = جديد google.maps.infowindow (

{المحتوى: رسالة [رقم] ،

الحجم: جديد google.maps.size (50،50)

}) ؛

google.maps.event.addlistener (علامة ، "انقر" ، دالة () {

InfoWindow.Open (MAP ، Marker) ؛

}) ؛

}

تم نسخ هذا الرمز من مسؤول Google

بعد ذلك ، أريد قراءة معلومات الطول والعنوان من قاعدة البيانات من قاعدة البيانات ، ووضع علامة عليها على خريطة Google وانقر لتمييزها لتظهر.

لتنفيذ التعليق التوضيحي متعدد النقاط ، يمكن الرجوع إلى الرمز أعلاه

نسخة الكود كما يلي:

<script type = "text/javaScript">

خريطة فار

window.onload = function load () {

var number = '<٪ = number ٪>' ؛ // احصل على قيمة عدد pubilc في الخلفية cs

var address = new array ()

var weidu = new array () ؛

var jingdu = new array () ؛

var chepai = new array () ؛

<٪ لـ (int i = 0 ؛ i <number ؛ i ++) {٪>

weidu.push ('<٪ = lan [i] ٪>') ؛ // احصل على قيمة خط العرض والطول من الخلفية cs

jingdu.push ('<٪ = lon [i] ٪>') ؛

address.push ('<٪ = addr [i] ٪>') ؛

chepai.push ('<٪ = carnum [i] ٪>') ؛

// var wei ؛

// wei = chepai ['<٪ = i ٪>'] ؛

// ALERT (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 = جديد google.maps.map (document.getElementByID ("map_canvas") ، myOptions) ؛ /// تهيئة مثيل MAP

لـ (var j = 0 ؛ j <number ؛ j ++) // لقد تعثرت هنا لفترة طويلة ، لأن نوع JS هو var فقط ؛ لقد أربكت JS و CS واستخدمته حتى "٪ ٪>. في الواقع ، لا يحتاجها JS البسيط ، فهو يشبه تقريبًا ج

{

var lat = weidu [j] ؛

var lng = jingdu [j] ؛

var address = address [j] ؛

var chepaihao = chepai [j] ؛

// ALERT (J) ؛

// ALERT (LAT) ؛

// var image = 'image/webcam.png' ؛

// اضبط نقطة العلم

var mylatlng = new Google.maps.latlng (weidu [j] ، jingdu [j]) ؛

var H = Chepaihao ؛

var tit = h.toString () ؛

var marker = جديد google.maps.marker ({

الموقف: mylatlng ،

الخريطة: خريطة ،

// icon: "http://google-maps-icons.googlecode.com/files/yellow08.png" ،

// أيقونة: الصورة ، // من خلال أيقونة ، يمكنك تعيين الرمز الذي تريد عرضه. إذا لم تقم بتعيينه ، فسوف تعرض الرمز الافتراضي لخريطة Google.

العنوان: العنوان // العنوان يعني القيمة التي سيتم عرضها على العلامة عن طريق وضع الماوس على العلامة.

}) ؛

includeSecretMessage (Marker ، J ، Addre ، LAT ، LNG) ؛

}

}

الدالة expressecretmessage (علامة ، الرقم ، addre1 ، lat1 ، lng1) {

// var message = ["this" ، "is" ، "the" ، "secret" ، "message"] ؛

var infoWindow = جديد google.maps.infowindow (

{content: "<span style = 'font-size: 15px'> <b> العنوان: </b>" + addre1 + "<br>" + "خط العرض والعرض:" + lat1 + "،" + lng1 + "</span>" ،

الحجم: جديد google.maps.size (50 ، 50)

}) ؛

// infoWindow.setContent ("العنوان:" +addre1 +"longitude:" +lat1 +"lat:" +lng1) ؛

// انقر لتبرع نافذة المعلومات

google.maps.event.addlistener (علامة ، "انقر" ، دالة () {

InfoWindow.Open (MAP ، Marker) ؛

}) ؛

}

</script>

رمز الخلفية CS:

نسخة الكود كما يلي:

باستخدام النظام ؛

باستخدام system.collections.generic ؛

باستخدام system.linq ؛

باستخدام system.web ؛

باستخدام system.web.ui ؛

باستخدام system.web.ui.webControls ؛

باستخدام system.web.ui.htmlcontrols ؛

باستخدام system.data.sqlclient ؛

Public Class Class Default2: System.Web.UI.PAGE

{

Public Double [] la = New Double [25] ؛

Public Double [] ln = New Double [25] ؛

Public Int [] id = new int [25] ؛

السلسلة العامة [] addr = سلسلة جديدة [25] ؛

رقم int العام ؛

page page_load محمي (مرسل الكائن ، EventArgs E)

{

String mycnnconnectionString1 = System.Configuration.ConfigurationManager.ConnectionStrings ["TestConect"]. ConnectionString ؛ // إنشاء سلسلة اتصال

sqlConnection mycnn1 = sqlConnection جديد (mycnnconnectionString1) ؛

mycnn1.Open () ؛

sqlCommand cmd1 = new SqlCommand ("Select L_ID ، l_lantitude ، l_longitude ، l_address from the the the the the the the the the the

sqldatareader dr1 = cmd1.executeReader () ؛

int k2 = 0 ؛

int k3 = 0 ؛

int k4 = 0 ؛

int k1 = 0 ؛

// string buf1 = "" ؛

double buf2 = 0 ؛

مزدوج buf3 = 0 ؛

int buf4 = 0 ؛

سلسلة buf1 = "0" ؛

بينما (dr1.Read ())

{

// لات

buf2 = (double) dr1 ["l_lantitude"] ؛

la [k2] = buf2 ؛

K2 ++ ؛

// الغاز الطبيعي المسال

buf3 = (double) dr1 ["l_longitude"]

ln [k3] = buf3 ؛

K3 ++ ؛

//بطاقة تعريف

buf4 = (int) dr1 ["l_id"] ؛

id [k4] = buf4 ؛

K4 ++ ؛

buf1 = dr1 ["l_address"]. toString () ؛

addr [k1] = buf1 ؛

K1 ++ ؛

}

رقم = k4 ؛

dr1.close () ؛

mycnn1.close () ؛

}

}