Beispiel für eine Multi-Point-Kennzeichnungsblase unter Verwendung der JS-Verschlussmethode

Ich habe an diesen zwei Tagen an der Karte gearbeitet, ein bisschen JS -Code und verschiedene Fallstricke. Als ich zum ersten Mal mit JS in Kontakt kam, gibt es alle möglichen Schwierigkeiten. Lassen Sie uns einige Nachforschungen in den letzten Tagen zusammenfassen und um Tricks bitten.

Verwenden Sie Schließungen bei Event -Hörern

Bei der Ausführung von Ereignishörern ist es oft wünschenswert, dem Objekt private und anhaltende Daten anzuhängen. JavaScript unterstützt keine "privaten" Instanzdaten, unterstützt jedoch Schließungen, mit denen interne Funktionen auf externe Variablen zugreifen können. Bei Ereignishörern sind Schließungen ideal für den Zugriff auf Variablen, die normalerweise nicht an Objekte verbunden sind, die auftreten.

Das folgende Beispiel verwendet einen Funktionsverschluss im Ereignishörer, um verschlüsselte Nachrichten einer Reihe von Tags zuzuweisen. Wenn Sie auf jedes Tag klicken, wird ein Teil der verschlüsselten Nachricht angezeigt, die nicht im Tag selbst enthalten ist.

Die Codekopie lautet wie folgt:

var map;

Funktion initialize () {

var mylatlng = new Google.maps.latlng (-25,363882,131.044922);

var mapOptions = {

Zoom: 4,

Mitte: Mylatlng,

MAPTYPEID: google.maps.maptypeid.roadmap

}

map = new Google.maps.map (document.getElementById ("map_canvas"), mapOptions);

// Fügen Sie der Karte an zufälligen Stellen 5 Marker hinzu.

var Southwest = new Google.maps.latlng (-31.203405,125,244141);

var northeast = new Google.maps.latlng (-25,363882,131.044922);

var bands = new Google.Maps.latlngBounds (Südwesten, Nordosten);

map.fitBounds (Grenzen);

var lngspan = northeast.lng () - Southwest.lng ();

var latspan = northeast.lat () - Southwest.lat ();

für (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: Ort,

Karte: Karte

});

var j = i + 1;

marker.settitle (j.tostring ());

AttachsecretMessage (Marker, i);

}

}

// Die fünf Markierungen zeigen beim Klicken eine geheime Nachricht an

// Aber diese Nachricht liegt nicht in den Instanzdaten des Markers.

Funktion attachsecretMessage (Marker, Nummer) {

var message = ["this", "," ist "," das "," geheim "," message "];

var infowindow = new Google.maps.infowindow (

{Inhalt: Nachricht [Nummer],

Größe: Neue Google.Maps.Size (50,50)

});

google.maps.event.addListener (Marker, 'Click', function () {

Infowindow.open (Karte, Marker);

});

}

Dieser Code wurde von Googles Beamter kopiert

Als nächstes möchte ich den Breitengrad und die Längengrad- und Adressinformationen aus der Datenbank lesen, sie auf der Google -Karte markieren und klicken, um sie so zu markieren, dass sie angezeigt werden.

Zur Implementierung von Multi-Point-Annotation kann der obige Code verwiesen werden

Die Codekopie lautet wie folgt:

<script type = "text/javaScript">

var map;

window.onload = Funktion load () {

var number = '< %= number %>'; // Erhalten Sie den Wert der Anzahl der Pubilc im Hintergrund Cs

var adress = new Array ()

var weidu = new Array ();

var jingdu = new Array ();

var Chepai = new Array ();

< % für (int i = 0; i <nummer; i ++) { %>

weidu.push ('<%= lan [i]%>'); // Erhalten Sie den Breiten- und Längenwert aus dem Hintergrund Cs

Jingdu.push ('<%= lon [i]%>');

address.push ('<%= addr [i]%>');

Chepai.push ('< %= carnum [i] %>');

// var Wei;

// Wei = Chepai ['<%= i%>'];

// alarm (Wei);

< %} %>

var latlng = new Google.maps.latlng (Weidu [0], Jingdu [0]);

// var mylatlng = new Google.maps.latlng (25.273566, 110.290195);

var myoptions = {

Zoom: 8,

Mitte: latlng,

MAPTYPEID: google.maps.maptypeid.roadmap

};

map = new Google.maps.map (document.getElementById ("map_canvas"), myoptions); //// eine Karteinstanz initialisieren

für (var j = 0; j <nummer; j ++) // Ich bin schon lange hier festgefahren, weil der JS -Typ nur var ist; Ich habe JS und CS verwirrt und es verwendet, bis " %>. Tatsächlich braucht einfach JS es nicht, es ist fast genauso wie C

{

var lat = weidu [j];

var lng = jingdu [j];

var adress = address [j];

var Chepaihao = Chepai [j];

// alarm (j);

// alarm (lat);

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

// Setzen Sie den Flag -Punkt

var mylatlng = new Google.maps.latlng (Weidu [j], Jingdu [j]);

var H = Chepaihao;

var tit = h.toString ();

var marker = new Google.maps.marker ({{

Position: mylatlng,

Karte: Karte,

// Symbol: "http://google-maps-icons.googlecode.com/files/yellow08.png",

// Symbol: Bild, // Durch das Symbol können Sie das Symbol festlegen, das Sie anzeigen möchten. Wenn Sie es nicht festlegen, zeigen Sie das Standardsymbol von Google Map an.

Titel: Titel // Titel bedeutet, dass der Wert auf dem Marker angezeigt wird, indem die Maus auf den Marker gesetzt wird.

});

AttachsecretMessage (Marker, J, Addre, Lat, Lng);

}

}

Funktion attCresecretMessage (Marker, Nummer, addre1, lat1, lng1) {

// var message = ["this", ",", "," das "," geheim "," message "];

var infowindow = new Google.maps.infowindow (

{Inhalt: "<span style = 'Schriftgröße: 15px'> <b> Adresse: </b>" + addre1 + "<br>" + "Breite und Länge:" + lat1 + "," + lng1 + "</span>",

Größe: Neue Google.Maps.Size (50, 50)

});

// Infowindow.setContent ("Adresse:" +addre1 +"Länge:" +lat1 +"lat:" +lng1);

// Klicken Sie, um Informationen zum Informationen zu erhalten

google.maps.event.addListener (Marker, 'Click', function () {

Infowindow.open (Karte, Marker);

});

}

</script>

CS -Backend -Code:

Die Codekopie lautet wie folgt:

mit System verwenden;

mit System.Collectionss.generic;

mit System.linq;

mit System.Web;

mit System.web.ui;

Verwenden von System.Web.Ui.Webcontrols;

mit System.web.ui.htmlControls;

mit System.data.sqlclient;

öffentliche Teilklasse Standard2: System.web.ui.page

{

public double [] la = new Double [25];

public double [] ln = neues double [25];

public int [] id = new int [25];

public String [] addr = new String [25];

öffentliche Int -Nummer;

Protected void page_load (Objektabsender, EventArgs e)

{

String mycnnConnectionString1 = System.Configuration.ConfigurationManager.ConnectionStrings ["testconect"]. ConnectionString; // eine Verbindungszeichenfolge erstellen

SqlConnection mycnn1 = new SqlConnection (mycnnConnectionString1);

mycnn1.open ();

SQLCommand CMD1 = NEU SQLCOMMAND ("SELECT L_ID, L_LANTIitude, l_longitude, l_address von neuestposition", mycnn1);

SqldatArader dr1 = cmd1.executereader ();

int k2 = 0;

int k3 = 0;

int k4 = 0;

int k1 = 0;

// String buf1 = "";

doppelt buf2 = 0;

doppelt buf3 = 0;

int buf4 = 0;

String buf1 = "0";

While (dr1.read ())

{

// lat

buf2 = (doppelt) dR1 ["l_lantitude"];

la [k2] = buf2;

K2 ++;

// lng

buf3 = (doppelt) dR1 ["l_longitude"]; /// Die Datenbank muss doppelt zum Lese-Float-Typ-Daten verwenden

ln [k3] = buf3;

K3 ++;

//Ausweis

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

id [k4] = buf4;

K4 ++;

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

addr [k1] = buf1;

K1 ++;

}

Zahl = K4;

dr1.close ();

mycnn1.close ();

}

}