He estado trabajando en el mapa estos dos días, un poco de código JS y varias dificultades. La primera vez que entré en contacto con JS, hay todo tipo de dificultades. Resumamos la investigación en los últimos días y solicitemos trucos.
Use cierres en los oyentes de eventos
Al ejecutar oyentes de eventos, a menudo es deseable adjuntar datos privados y persistentes al objeto. JavaScript no admite datos de instancias "privadas", pero admite cierres que permiten que las funciones internas accedan a variables externas. En los oyentes de eventos, los cierres son ideales para acceder a variables que generalmente no están adjuntas a objetos que ocurren.
El siguiente ejemplo utiliza un cierre de funciones en el oyente de eventos para asignar mensajes cifrados a un conjunto de etiquetas. Al hacer clic en cada etiqueta, una parte del mensaje cifrado que no está incluido en la etiqueta en sí.
La copia del código es la siguiente:
mapa var;
función inicialize () {
var mylatlng = nuevo Google.maps.latlng (-25.363882,131.044922);
var mapOptions = {
Zoom: 4,
Centro: mylatlng,
MapTypeid: Google.Maps.MapTypeid.Roadmap
}
map = nuevo Google.maps.map (document.getElementById ("map_canvas"), mapOptions);
// Agregue 5 marcadores al mapa en ubicaciones aleatorias.
var Southwest = nuevo Google.maps.latlng (-31.203405,125.244141);
var noreste = nuevo Google.maps.latlng (-25.363882,131.044922);
Var Bounds = nuevo Google.maps.latlngBounds (Southwest, noreste);
map.fitBounds (límites);
var lngspan = nororeste.lng () - Southwest.lng ();
var latspan = noreste.lat () - Southwest.lat ();
para (var i = 0; i <5; i ++) {
Var Ubicación = nuevo Google.maps.latlng (Southwest.lat () + Latspan * Math.random (),
Southwest.lng () + lngspan * math.random ());
var marcador = nuevo google.maps.marker ({
Posición: Ubicación,
Mapa: mapa
});
var j = i + 1;
Marker.settitle (J.ToString ());
Adjunte SecretMessage (marcador, i);
}
}
// Los cinco marcadores muestran un mensaje secreto cuando se hace clic
// Pero ese mensaje no está dentro de los datos de instancia del marcador.
function adjectSecretMessage (marcador, número) {
var mension = ["this", "is", "el", "secreto", "mensaje"];
var infowindow = new Google.maps.infowindow (
{contenido: mensaje [número],
Tamaño: nuevo Google.maps.size (50,50)
});
Google.maps.event.addListener (marcador, 'hacer clic', function () {
infowindow.open (mapa, marcador);
});
}
Este código fue copiado del funcionario de Google
A continuación, quiero leer la información de latitud y longitud y dirección de la base de datos, marcarla en el mapa de Google y hacer clic para marcarlo para que aparezca.
Para implementar la anotación de múltiples puntos, se puede hacer referencia al código anterior
La copia del código es la siguiente:
<script type = "text/javaScript">
mapa var;
window.onload = function load () {
VAR Número = '< %= número %>'; // Obtenga el valor del número de pubilc en el fondo CS
dirección var = nueva array ()
var weidu = new Array ();
var jingdu = new Array ();
var chepai = new Array ();
< % para (int i = 0; i <number; i ++) { %>
weidu.push ('<%= lan [i]%>'); // Obtenga el valor de latitud y longitud del fondo CS
jingdu.push ('<%= lon [i]%>');
dirección.push ('<%= addr [i]%>');
chepai.push ('< %= carnum [i] %>');
// var wei;
// wei = chepai ['<%= i%>'];
// alerta (wei);
< %} %>
var latlng = nuevo Google.maps.latlng (weidu [0], jingdu [0]);
// var mylatlng = nuevo Google.maps.latlng (25.273566, 110.290195);
var myOptions = {
Zoom: 8,
Centro: latlng,
MapTypeid: Google.Maps.MapTypeid.Roadmap
};
map = nuevo Google.maps.map (document.getElementById ("map_canvas"), myOptions); //// Inicializar una instancia de mapa
para (var j = 0; j <número; j ++) // He estado atrapado aquí durante mucho tiempo, porque el tipo js es solo var; He confundido JS y CS y lo usé hasta " % %>. De hecho, Simple JS no lo necesita, es casi lo mismo que C
{
var lat = weidu [j];
var lng = jingdu [j];
dirección var = dirección [j];
var chepaihao = chepai [j];
// alerta (j);
// alerta (lat);
// var Image = 'Image/WebCam.png';
// Establecer el punto de bandera
var mylatlng = new Google.maps.latlng (weidu [j], jingdu [j]);
var h = chepaihao;
var tit = H.ToString ();
var marcador = nuevo google.maps.marker ({
Posición: mylatlng,
Mapa: mapa,
// icon: "http://google-maps-icons.googlecode.com/files/yellow08.png",
// icono: imagen, // a través del icono, puede establecer el icono que desea mostrar. Si no lo establece, mostrará el icono predeterminado del mapa de Google.
Título: Título // Título significa el valor que se mostrará en el marcador colocando el mouse en el marcador.
});
Adjunte SecretMessage (Marker, J, Addre, Lat, Lng);
}
}
Función AttachSecretMessage (marcador, número, Addre1, Lat1, Lng1) {
// var Message = ["this", "is", "el", "secreto", "mensaje"];
var infowindow = new Google.maps.infowindow (
{contenido: "<span style = 'font-size: 15px'> <b> dirección: </b>" + addre1 + "<br>" + "latitud y longitud:" + lat1 + "," + lng1 + "</span>",
Tamaño: nuevo Google.maps.size (50, 50)
});
// infowindow.setContent ("Dirección:" +Addre1 +"Longitud:" +Lat1 +"Lat:" +Lng1);
// Haga clic para emerger la ventana de información
Google.maps.event.addListener (marcador, 'hacer clic', function () {
infowindow.open (mapa, marcador);
});
}
</script>
Código de backend de CS:
La copia del código es la siguiente:
usando el sistema;
usando System.Collections.Generic;
usando System.Linq;
usando System.web;
usando System.web.ui;
usando System.Web.UI.WebControls;
usando System.Web.UI.HTMLControls;
usando System.Data.SqlClient;
Class parcial pública predeterminado2: system.web.ui.page
{
Public Double [] LA = New Double [25];
público doble [] ln = new Double [25];
public int [] id = new int [25];
cadena pública [] addr = new String [25];
Número de int Public int;
protegido void page_load (remitente de objeto, EventArgs e)
{
String mycnnconnectionstring1 = system.configuration.ConfigurationManager.ConnectionStrings ["TestConect"]. ConnectionString; // Crear una cadena de conexión
Sqlconnection mycnn1 = new sqlconnection (mycnnconnectionstring1);
mycnn1.open ();
SqlCommand cmd1 = new SqlCommand ("Seleccione l_id, l_lantitude, l_longitude, l_address de laposición Última", mycnn1);
SqlDatarader dr1 = cmd1.executereader ();
int k2 = 0;
int k3 = 0;
int k4 = 0;
int k1 = 0;
// cadena buf1 = "";
doble buf2 = 0;
doble buf3 = 0;
int buf4 = 0;
cadena buf1 = "0";
While (dr1.read ())
{
// lat
buf2 = (doble) dr1 ["l_lantitude"];
la [k2] = buf2;
K2 ++;
// lng
buf3 = (doble) DR1 ["l_longitude"]; /// La base de datos debe usar datos de tipo float de doble para leer
ln [k3] = buf3;
K3 ++;
//identificación
buf4 = (int) dr1 ["l_id"];
id [k4] = buf4;
K4 ++;
buf1 = dr1 ["l_address"]. toString ();
addr [k1] = buf1;
K1 ++;
}
número = k4;
dr1.close ();
mycnn1.close ();
}
}