谷歌地图上动态标注数字文字等图标 源代码整理

今天公司需要一个在谷歌地图上动态标注车辆运动轨迹点的功能，刚开始没找到切入点，经过一个下午摸索下来，基本实现了领导要求。

具体做法参考了登陆验证生成随机图片代码、以及谷歌标识图片的范例：

 

 

  //谷歌中添加轨迹孤立点方法轨迹

    //查看 画孤立的轨迹点
    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();
        }
    }

 

 总结：将两个常用功能，图片验证，谷歌标注结合起来实现这一新功能，需要在不断借鉴中实践！