今天公司需要一个在谷歌地图上动态标注车辆运动轨迹点的功能,刚开始没找到切入点,经过一个下午摸索下来,基本实现了领导要求。
具体做法参考了登陆验证生成随机图片代码、以及谷歌标识图片的范例:
//谷歌中添加轨迹孤立点方法轨迹
//查看 画孤立的轨迹点
function showIsolateSignals() //显示孤立的轨迹点
{
for (var i = 0; i < customLineList.length; i++) {
customLineList[i].setMap(null);
customLineList[i] = null;
}
customLineList = new Array();
//画轨迹
//生成折线的点数组
signals = parent.latlnglist().value;
var points = new Array();
signalList = new Array();
signalList = signals.split(';')
var ListLen = signalList.length;
//装载所有得点
for (var i = 0; i < ListLen; i++) {
var latlng = signalList[i].split(',');
points[i] = new LTPoints(latlng[0], latlng[1]);
}
将折线放置在map上
//var polylineOptions = {
// path: points, geodesic: true, // 可测量的
// strokeColor: "#0000FF", // 线条颜色 红色
// strokeOpacity: 0.8, // 透明度 50%
// strokeWeight: 5 // 宽度 5像素
//}; // 创建一个Polyline的实例
//var polyline1 = new google.maps.Polyline(polylineOptions);
//polyline1.setMap(map); // 设置显示到map上
var subPoints = new Array();
for (var i = 0; i < ListLen; i++) {
var value = signalList[i].split(',');
if (i == 0 || ((i < ListLen - 1) && value[8] == signalList[i + 1].split(',')[8])) {
subPoints.push(new LTPoints(value[0], value[1]));
}
else {
subPoints.push(new LTPoints(value[0], value[1]));
if (value[8] == "0") {
var polylineOptions = {
path: subPoints, geodesic: true, // 可测量的
strokeColor: "#0000FF", // 线条颜色 蓝色色
strokeOpacity: 0, // 透明度 50%
strokeWeight: 5 // 宽度 5像素
};
var polyline1 = new google.maps.Polyline(polylineOptions);
polyline1.setMap(map); // 设置显示到map上
customLineList.push(polyline1);
}
else { //盲区补点
var polylineOptions = {
path: subPoints, geodesic: true, // 可测量的
strokeColor: "#FF0000", // 线条颜色 红色
strokeOpacity: 0, // 透明度 50%
strokeWeight: 5 // 宽度 5像素
};
var polyline1 = new google.maps.Polyline(polylineOptions);
polyline1.setMap(map); // 设置显示到map上
customLineList.push(polyline1);
}
if (i < ListLen - 1) {
subPoints = new Array();
subPoints.push(new LTPoints(value[0], value[1]));
}
}
var lng = value[0];
var lat = value[1];
var angle = value[2];
AddHisDynamicMarker(lng, lat, angle, value, i);
}
//增加起始点
var icon = "pic/Start1.png";
var startMark = new google.maps.Marker({
position: points[0],
map: map,
icon: icon,
title: ""
});
//增加结束点
icon = "pic/End1.png";
var endMark = new google.maps.Marker({
position: points[ListLen - 1],
map: map,
icon: icon,
title: ""
});
GetBestMap(points); //显示最佳比例尺和位置
}
//画动态数字或文字图标就用下面的函数了:
function AddHisDynamicMarker(lng, lat, angle, value, number) {
//画动态点
var icon1 = "../imagecode.aspx?number=" + number;//请求一个页面,得到动态图片
var latLng = new google.maps.LatLng(lat, lng);
var marker1 = new google.maps.Marker({
position: latLng,
map: map,
icon: icon1,
title: ""
});
var infowindow = new google.maps.InfoWindow();
var strDescribe = "获取中......";
var descShow = "<div align=left>" +
"经度:" + lng + "<br>纬度:" + lat +
"<br>速度:" + value[4] + "KM/H" + "<br>里程:" + value[5] + "公里";
//if (value[6] > 0)
// descShow += "<br>油表:" + value[6];
//else
// descShow += "<br>油表:未安装";
var oilPencent = parseFloat(value[7]);
if (oilPencent != 'NaN' && oilPencent > 0)
descShow += "<br>油位:" + value[7];
if (value[10] != "")
descShow += "<br/>温度:" + value[10];
if (value[11] != "")
descShow += "<br/>滚筒:" + value[11];
descShow += "<br>时间:" + value[3] + "<br></div>";
infowindow.setContent(descShow);
//google.maps.event.addListener(marker1, 'click', function () {
// if (!infowindow) {//单例infowindow
// infowindow = new google.maps.InfoWindow({});
// }
// infowindow.open(map, marker1);
// SetAddress(lng, lat, infowindow);
//});
google.maps.event.addListener(marker1, 'mouseover', function () {
if (!infowindow) {//单例infowindow
infowindow = new google.maps.InfoWindow({});
}
infowindow.open(map, marker1);
SetAddress(lng, lat, infowindow);
google.maps.event.addListener(marker1, 'mouseout', function () {
if (infowindow) {//单例infowindow
infowindow.close(map, marker1);
}
});
});
signalMarkerList.push(marker1);
}
用一个页面接受请求,返回生成的数字图片
imagecode.aspx:
protected void Page_Load(object sender, EventArgs e)
{
var no = Request["number"].ToString();
this.CreateCheckCodeImage(no);
//this.CreateCheckCodeImage(RndNum());
}
private void CreateCheckCodeImage(string checkCode)
{
if (checkCode == null || checkCode.Trim() == String.Empty)
return;
System.Drawing.Bitmap image = new System.Drawing.Bitmap((int)Math.Ceiling((checkCode.Length * 15.5)), 22);
Graphics g = Graphics.FromImage(image);
g.SmoothingMode = SmoothingMode.AntiAlias; //使绘图质量最高,即消除锯齿
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.CompositingQuality = CompositingQuality.HighQuality;
try
{
//生成随机生成器
//Random random = new Random();
清空图片背景色
//g.Clear(Color.White);
画图片的背景噪音线
//for (int i = 0; i < 25; i++)
//{
// int x1 = random.Next(image.Width);
// int x2 = random.Next(image.Width);
// int y1 = random.Next(image.Height);
// int y2 = random.Next(image.Height);
// g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2);
//}
System.Drawing.Drawing2D.LinearGradientBrush brush = new System.Drawing.Drawing2D.LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Red, Color.Red, 0f, false);
//g.DrawEllipse(new Pen(Color.Blue, 4), new Rectangle(0, 0, image.Width , image.Height ));
Font font = new System.Drawing.Font("simsun", 12, (System.Drawing.FontStyle.Bold | System.Drawing.FontStyle.Regular));
g.DrawString(checkCode, font, brush, 2, 2);
画图片的前景噪音点
//for (int i = 0; i < 100; i++)
//{
// int x = random.Next(image.Width);
// int y = random.Next(image.Height);
// image.SetPixel(x, y, Color.FromArgb(random.Next()));
//}
//画图片的边框线
g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);
System.IO.MemoryStream ms = new System.IO.MemoryStream();
image.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
Response.ClearContent();
Response.ContentType = "image/png";
Response.BinaryWrite(ms.ToArray());
}
finally
{
g.Dispose();
image.Dispose();
}
}
总结:将两个常用功能,图片验证,谷歌标注结合起来实现这一新功能,需要在不断借鉴中实践!