今天公司需要一个在谷歌地图上动态标注车辆运动轨迹点的功能，刚开始没找到切入点，经过一个下午摸索下来，基本实现了领导要求。
具体做法参考了登陆验证生成随机图片代码、以及谷歌标识图片的范例：
//谷歌中添加轨迹孤立点方法轨迹
//查看 画孤立的轨迹点 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(); } }
总结：将两个常用功能，图片验证，谷歌标注结合起来实现这一新功能，需要在不断借鉴中实践！
