J'ai travaillé sur la carte ces deux jours, un peu de code JS et divers pièges. La première fois que je suis entré en contact avec JS, il y a toutes sortes de difficultés. Résumons les recherches au cours des derniers jours et demandons des astuces.
Utilisez des fermetures dans les auditeurs d'événements
Lors de l'exécution des auditeurs d'événements, il est souvent souhaitable d'attacher des données privées et persistantes à l'objet. JavaScript ne prend pas en charge les données d'instance "privées", mais prend en charge les fermetures qui permettent aux fonctions internes d'accéder aux variables externes. Dans les auditeurs d'événements, les fermetures sont idéales pour accéder à des variables qui ne sont généralement pas attachées aux objets qui se produisent.
L'exemple suivant utilise une fermeture de fonction dans l'écouteur d'événements pour attribuer des messages chiffrés à un ensemble de balises. Cliquer sur chaque balise verra une partie du message crypté qui n'est pas incluse dans la balise elle-même.
La copie de code est la suivante:
var map;
fonction initialize () {
var mylatlng = new Google.maps.latlng (-25.363882,131.044922);
var mapoptions = {
Zoom: 4,
Centre: Mylatlng,
MapTypeid: google.maps.maptypeid.roadmap
}
map = new Google.maps.map (document.getElementById ("map_canvas"), mapOptions);
// Ajouter 5 marqueurs à la carte à des endroits aléatoires.
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 (sud-ouest, nord-est);
map.fitbounds (limites);
var lngspan = nord-est.lng () - sud-ouest.lng ();
var latspan = nord-est.lat () - sud-ouest.lat ();
pour (var i = 0; i <5; i ++) {
Var Location = new Google.Maps.latlng (Southwest.Lat () + Lastepan * Math.Random (),
Southwest.lng () + lngspan * math.random ());
var marker = new Google.maps.marker ({{{{
Position: Emplacement,
Carte: carte
});
var j = i + 1;
Marker.SetTitle (J.ToString ());
attachseCretMessage (marqueur, i);
}
}
// Les cinq marqueurs affichent un message secret lorsque vous cliquez sur
// Mais ce message n'est pas dans les données d'instance du marqueur.
fonction attachseCretMessage (marqueur, numéro) {
var message = ["this", "est", "le", "secret", "message"];
var infowindow = new Google.maps.infowindow (
{contenu: message [numéro],
Taille: Nouveau Google.Maps.Size (50,50)
});
google.maps.event.addistener (marqueur, 'click', function () {
infowindow.open (carte, marqueur);
});
}
Ce code a été copié à partir de Google
Ensuite, je veux lire les informations de latitude et de longitude et adresse à la base de données, la marquer sur la carte Google et cliquez pour la marquer pour apparaître.
Pour implémenter l'annotation multi-points, le code ci-dessus peut être référencé
La copie de code est la suivante:
<script type = "text / javascript">
var map;
window.onLoad = fonction charge () {
var nombre = '<% = nombre%>'; // Obtenez la valeur du nombre de pubilc en arrière-plan CS
var adresse = nouveau array ()
var weidu = nouveau array ();
var jingdu = new array ();
var chepai = nouveau array ();
<% pour (int i = 0; i <nombre; i ++) {%>
weidu.push ('<% = lan [i]%>'); // Obtenez la valeur de latitude et de longitude à partir de l'arrière-plan cs
jingdu.push ('<% = lon [i]%>');
adresse.push ('<% = addr [i]%>');
chepai.push ('<% = carnum [i]%>');
// var wei;
// wei = chepai ['<% = i%>'];
// alerte (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,
Centre: latlng,
MapTypeid: google.maps.maptypeid.roadmap
};
map = new Google.maps.map (document.getElementById ("map_canvas"), myoptions); //// initialiser une instance de carte
pour (var j = 0; j <nombre; j ++) // je suis coincé ici depuis longtemps, car le type js n'est que var; J'ai confondu JS et CS et je l'ai utilisé jusqu'à ce que "%%>. En fait, JS simple n'en a pas besoin, c'est presque la même chose que C
{
var lat = weidu [j];
var lng = jingdu [j];
var adresse = adresse [j];
var chepaihao = chepai [j];
// alerte (j);
// alerte (lat);
// var image = 'image / webcam.png';
// Définit le point de drapeau
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,
Carte: carte,
// icône: "http://google-maps-icons.googlecode.com/files/yellow08.png",
// icône: image, // via l'icône, vous pouvez définir l'icône que vous souhaitez afficher. Si vous ne le définissez pas, vous afficherez l'icône par défaut de Google Map.
Titre: Title // Titre signifie la valeur à afficher sur le marqueur en mettant la souris sur le marqueur.
});
attachseCretMessage (Marker, J, Addre, Lat, LNG);
}
}
fonction attachseCretMessage (marqueur, numéro, addre1, lat1, lng1) {
// var message = ["this", "est", "le", "secret", "message"];
var infowindow = new Google.maps.infowindow (
{contenu: "<span style = 'font-size: 15px'> <b> adresse: </b>" + addre1 + "<br>" + "latitude et longitude:" + lat1 + "," + lng1 + "</span>",
Taille: Nouveau Google.Maps.Size (50, 50)
});
// infowindow.setContent ("adresse:" + addre1 + "longitude:" + lat1 + "lat:" + lng1);
// Cliquez pour faire apparaître la fenêtre d'information
google.maps.event.addistener (marqueur, 'click', function () {
infowindow.open (carte, marqueur);
});
}
</cript>
COS Backend CS:
La copie de code est la suivante:
Utilisation du système;
Utilisation de System.Collections. GENENERIER;
Utilisation de System.Linq;
Utilisation de System.Web;
Utilisation de System.Web.UI;
Utilisation de System.Web.Ui.WebControls;
Utilisation de System.Web.Ui.htmlControls;
Utilisation de System.Data.SqlClient;
Classe partielle publique Par défaut 2: System.Web.Ui.Page
{
Double public [] la = nouveau double [25];
Double public [] ln = nouveau double [25];
public int [] id = new int [25];
String public [] addr = new String [25];
numéro d'int public;
Protégé void page_load (expéditeur d'objet, EventArgs e)
{
String mycnnconnectionString1 = System.Configuration.ConfigurationManager.ConnectionStrings ["TestConect"]. ConnectionString; // Créer une chaîne de connexion
SqlConnection mycnn1 = new sqlconnection (mycnnconnectionString1);
mycnn1.open ();
Sqlcommand cmd1 = new sqlcommand ("select l_id, l_LANTIDE, l_longitude, l_address From DernitedPosition", mycnn1);
SqlDataReader DR1 = CMD1.EXECUTEREDER ();
int k2 = 0;
int k3 = 0;
int k4 = 0;
int k1 = 0;
// String buf1 = "";
double buf2 = 0;
double buf3 = 0;
int buf4 = 0;
chaîne buf1 = "0";
While (dr1.read ())
{
// lat
buf2 = (double) dr1 ["l_LANTUDE"];
la [k2] = buf2;
k2 ++;
// lng
buf3 = (double) dr1 ["l_longitude"]; /// La base de données doit utiliser les données de type Float-Type Double pour lire
ln [k3] = buf3;
k3 ++;
//identifiant
buf4 = (int) dr1 ["l_id"];
id [k4] = buf4;
k4 ++;
buf1 = dr1 ["l_address"]. toString ();
addr [k1] = buf1;
k1 ++;
}
nombre = k4;
dr1.close ();
mycnn1.close ();
}
}