Eu tenho trabalhado no mapa nesses dois dias, um pouco do código JS e várias armadilhas. A primeira vez que entrei em contato com o JS, há todos os tipos de dificuldades. Vamos resumir algumas pesquisas nos últimos dias e pedir truques.
Use fechamentos em ouvintes de eventos
Ao executar os ouvintes do evento, geralmente é desejável anexar dados privados e persistentes ao objeto. O JavaScript não suporta dados de instância "privado", mas suporta fechamentos que permitem que funções internas acessem variáveis externas. Nos ouvintes, os fechamentos são ideais para acessar variáveis que geralmente não são anexadas a objetos que ocorrem.
O exemplo a seguir usa um fechamento de função no ouvinte para atribuir mensagens criptografadas a um conjunto de tags. Clicar em cada tag verá uma parte da mensagem criptografada que não está incluída na própria tag.
A cópia do código é a seguinte:
var mapa;
função inicialize () {
var mylatlng = new google.maps.latlng (-25.363882,131.044922);
var mapoptions = {
Zoom: 4,
centro: mylatlng,
MapTypeID: google.maps.maptypeid.roadmap
}
map = new google.maps.map (document.getElementById ("map_canvas"), mapoptions);
// Adicione 5 marcadores ao mapa em locais aleatórios.
var Southwest = new google.maps.latlng (-31.203405.125.244141);
var nordeste = novo google.maps.latlng (-25.363882,131.044922);
var limites = new google.maps.latlngbounds (sudoeste, nordeste);
map.FitBounds (limites);
var lngspan = nordeste.lng () - Southwest.lng ();
var Latspan = nordeste.lat () - Southwest.lat ();
for (var i = 0; i <5; i ++) {
var location = novo google.maps.latlng (Southwest.lat () + Latspan * Math.random (),
Southwest.lng () + lngspan * math.random ());
var marker = new google.maps.marker ({
Posição: Localização,
Mapa: Mapa
});
var j = i + 1;
Marker.Settitle (J.ToString ());
AnexsEcretMessage (marcador, i);
}
}
// Os cinco marcadores mostram uma mensagem secreta quando clicados
// Mas essa mensagem não está dentro dos dados da instância do marcador.
Função AnexeCretMessage (marcador, número) {
var mensagem = ["this", "é", "o", "secreto", "mensagem"];
var infowindow = new google.maps.infowindow (
{content: mensagem [número],
Tamanho: Novo Google.maps.size (50,50)
});
google.maps.event.addlistener (marcador, 'click', function () {
infowindow.open (mapa, marcador);
});
}
Este código foi copiado do oficial do Google
Em seguida, quero ler a latitude e longitude e endereçar informações do banco de dados, marcar -as no mapa do Google e clique para marcá -lo para aparecer.
Para implementar a anotação de vários pontos, o código acima pode ser referenciado
A cópia do código é a seguinte:
<script type = "text/javascript">
var mapa;
window.onload = função load () {
var number = '< %= número %>'; // obtenha o valor do número de pubilc no fundo CS
VAR Endereço = novo Array ()
var weidu = new Array ();
var jingdu = new Array ();
var chepai = new Array ();
< % para (int i = 0; i <número; i ++) { %>
weidu.push ('<%= lan [i]%>'); // obtenha o valor de latitude e longitude do fundo CS
jingdu.push ('<%= LON [i]%>');
endereço.push ('<%= addr [i]%>');
chepai.push ('< %= carnum [i] %>');
// var wei;
// wei = chepai ['<%= i%>'];
// alerta (wei);
< %} %>
var latlng = new google.maps.latlng (weidu [0], jingdu [0]);
// var mylatlng = new google.maps.latlng (25.273566, 110.290195);
var mioptions = {
Zoom: 8,
centro: latlng,
MapTypeID: google.maps.maptypeid.roadmap
};
map = novo google.maps.map (document.getElementById ("map_canvas"), mioptions); //// inicialize uma instância do mapa
for (var j = 0; j <número; j ++) // Fico aqui por um longo tempo, porque o tipo JS é apenas var; Eu confundi JS e CS e o usei até " % %>. De fato, o JS simples não precisa, é quase o mesmo que C
{
var lat = weidu [j];
var lng = jingdu [j];
VAR endereço = endereço [j];
var Chepaihao = Chepai [J];
// alerta (j);
// alerta (lat);
// var imagem = 'image/webcam.png';
// Defina o ponto de bandeira
var mylatlng = new google.maps.latlng (weidu [j], jingdu [j]);
var H = Chepaihao;
var tit = h.toString ();
var marker = new google.maps.marker ({
posição: mylatlng,
Mapa: mapa,
// Ícone: "http://google-maps-iCons.googlecode.com/files/yellow08.png",
// Ícone: Image, // Através do ícone, você pode definir o ícone que deseja exibir. Se você não definir, exibirá o ícone padrão do Google Map.
Título: Título // Título significa o valor a ser exibido no marcador colocando o mouse no marcador.
});
AnexsEcretMessage (Marker, J, Addre, Lat, LNG);
}
}
Função AnexeCretMessage (Marcador, Número, Addre1, Lat1, Lng1) {
// var message = ["this", "é", "o", "secreto", "mensagem"];
var infowindow = new google.maps.infowindow (
{content: "<span style = 'font-size: 15px'> <b> endereço: </b>" + addre1 + "<br>" + "latitude e longitude:" + lat1 + "," + lng1 + "</span>",
Tamanho: Novo Google.maps.size (50, 50)
});
// infowindow.setContent ("endereço:" +addre1 +"longitude:" +lat1 +"lat:" +lng1);
// Clique para exibir a janela de informações
google.maps.event.addlistener (marcador, 'click', function () {
infowindow.open (mapa, marcador);
});
}
</script>
Código de back -end do CS:
A cópia do código é a seguinte:
usando o sistema;
usando system.collections.generic;
usando System.Linq;
usando System.Web;
usando system.web.ui;
usando o System.web.ui.webcontrols;
usando o System.web.ui.htmlControls;
usando System.Data.SQLClient;
Classe Parcial Pública Default2: System.web.ui.page
{
public duplo [] la = novo duplo [25];
public duplo [] ln = novo duplo [25];
public int [] id = new int [25];
public string [] addr = new string [25];
Número INT público;
Void Page_load protegido (remetente de objeto, EventArgs e)
{
String mycnnconnstring1 = system.configuration.configurationManager.Connectionstrings ["testConect"]. ConnectionString; // Crie uma string de conexão
SqlConnection mycnn1 = new sqlConnection (mycnnconnectionString1);
mycnn1.open ();
SqlCommand cmd1 = new sqlCommand ("Selecione l_id, l_lantitude, l_longitude, l_address from ultimposition", mycnn1);
SqldAtareader dr1 = cmd1.execheteReader ();
int k2 = 0;
int k3 = 0;
int k4 = 0;
int k1 = 0;
// string buf1 = "";
duplo buf2 = 0;
duplo buf3 = 0;
int buf4 = 0;
string buf1 = "0";
While (dr1.read ())
{
// Lat
buf2 = (duplo) dr1 ["l_lantitude"];
la [k2] = buf2;
k2 ++;
// lng
BUF3 = (duplo) dr1 ["l_longitude"]; /// O banco de dados precisa usar o dobro para ler dados do tipo float
ln [k3] = buf3;
k3 ++;
//eu ia
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 ();
}
}