I have been working on the map these two days, a little bit of js code, and various pitfalls. The first time I came into contact with JS, there are all kinds of difficulties. Let’s summarize some research in the past few days, and ask for tricks.
Use closures in event listeners
When executing event listeners, it is often desirable to attach private and persistent data to the object. JavaScript does not support "private" instance data, but supports closures that allow internal functions to access external variables. In event listeners, closures are ideal for accessing variables that are not usually attached to objects that occur.
The following example uses a function closure in the event listener to assign encrypted messages to a set of tags. Clicking on each tag will see a portion of the encrypted message that is not included in the tag itself.
The code copy is as follows:
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Add 5 markers to the map at random locations.
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(southWest,northEast);
map.fitBounds(bounds);
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (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: location,
map: map
});
var j = i + 1;
marker.setTitle(j.toString());
attachSecretMessage(marker, i);
}
}
// The five markers show a secret message when clicked
// but that message is not within the marker's instance data.
function attachSecretMessage(marker, number) {
var message = ["This","is","the","secret","message"];
var infowindow = new google.maps.InfoWindow(
{ content: message[number],
size: new google.maps.Size(50,50)
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
This code was copied from Google's official
Next, I want to read the latitude and longitude and address information from the database, mark it on the Google map and click to mark it to appear.
To implement multi-point annotation, the above code can be referenced
The code copy is as follows:
<script type="text/javascript" >
var map;
window.onload =function load() {
var number='<%=number %>';//Get the value of the number of pubilc in the background cs
var address = new Array()
var weidu=new Array();
var jingdu=new Array();
var chepai = new Array();
<% for(int i=0;i<number;i++){ %>
weidu.push('<%=lan[i]%>');//Get the latitude and longitude value from the background 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 = {
zoom: 8,
center: Latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);//// Initialize a map instance
for(var j=0;j<number;j++) //I have been stuck here for a long time, because the js type is only var; I have confused js and cs and used it until "% %>. In fact, simple js does not need it, it is almost the same as C
{
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';
//Set the flag point
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,
map: map,
// icon: "http://google-maps-icons.googlecode.com/files/yellow08.png",
// icon: image, // Through icon, you can set the icon you want to display. If you don’t set it, you will display the default icon of Google map.
title: title //title means the value to be displayed on the marker by putting the mouse on the marker.
});
attachSecretMessage(marker, j,addre,lat,lng);
}
}
function attachSecretMessage(marker, number,addre1,lat1,lng1) {
// var message = ["This", "is", "the", "secret", "message"];
var infowindow = new google.maps.InfoWindow(
{ content: "<span style='font-size:15px'><b>Address: </b>" + addre1 + "<br>"+ "Latitude and longitude: "+ lat1 + ","+ lng1 +"</span>",
size: new google.maps.Size(50, 50)
});
// infowindow.setContent("Address:"+addre1 +"Longitude:" +lat1 + "Lat:"+lng1);
//Click to pop up information window
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
</script>
Cs backend code:
The code copy is as follows:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
public partial class Default2 : System.Web.UI.Page
{
public double[] la = new double[25];
public double[] ln = new double[25];
public int[] id = new int[25];
public string[] addr = new string[25];
public int number;
protected void Page_Load(object sender, EventArgs e)
{
string mycnnConnectionString1 = System.Configuration.ConfigurationManager.ConnectionStrings["testconect"].ConnectionString; //Create a connection string
SqlConnection mycnn1 = new SqlConnection(mycnnConnectionString1);
mycnn1.Open();
SqlCommand cmd1 = new SqlCommand("select L_ID,L_Lantitude,L_Longitude,L_Address from LatestPosition ", mycnn1);
SqlDataReader dr1 = cmd1.ExecuteReader();
int k2 = 0;
int k3 = 0;
int k4 = 0;
int k1 = 0;
// string buf1 = "";
double buf2 = 0;
double buf3 = 0;
int buf4 = 0;
string buf1 = "0";
While (dr1.Read())
{
//lat
buf2 = (double)dr1["L_Lantitude"];
la[k2] = buf2;
k2++;
//lng
buf3 = (double)dr1["L_Longitude"];/// The database needs to use double to read float-type data
ln[k3] = buf3;
k3++;
//id
buf4 = (int)dr1["L_ID"];
id[k4] = buf4;
k4++;
buf1 = dr1["L_Address"].ToString();
addr[k1] = buf1;
k1++;
}
number = k4;
dr1.Close();
mycnn1.Close();
}
}