利用google map做轨迹回放

总体思路：播放控制是FLEX处理的，首先从服务器端取得数据，然后调用FLEX的数据处理函数，主要是转换GPS点，生成一个数据列表。之后调用FLEX的播放，暂停，停止，加速，减速等方法达到我们想要的目标（在调用FLEX的播放控制函数后，FLEX会调用JS的更新GPS点的函数）
注意事项：
1.google map api参考地址：https://developers.google.com/maps/documentation/javascript/overlays?hl=zh-cn#OverlaysOverview；
2。引用google map api时，文档中添加引用地址（https://maps.google.com/maps/api/js?sensor=set_to_true_or_false）经常打不开（被XX封锁了，需翻墙），但是可以用：https://maps.googleapis.com/maps/api/js?sensor=false代替；
3.IE8下MarkerImage不能正常显示，图片大小为16*16，格式为PNG，在设置MakerImage的时候，火狐能正常显示，但是在IE8下，显示的图片大小为32*32，解决办法：
原代码：var alarmimg= new google.maps.MarkerImage('/Content/Develop/images/alarmed.png', new google.maps.Size(16, 16)); 

修改后：var alarmimg= new google.maps.MarkerImage('/Content/Develop/images/alarmed.png', new google.maps.Size(16, 16), null,null, new google.maps.Size(16, 16)); 
部分代码：

<script type="text/javascript">
        window.onload = function() { top.SetPanelPosition("popPanel", $(document).width(), $(document).height() + 35);         }
        
          var params = {
                allowFullscreen: "true",
                allowScriptAccess: "sameDomain",
                bgcolor: "#FFFFFF",
                quality: "high",
                wmode:"transparent"
            };
            swfobject.embedSWF("/Flex/instrument/JsInstrumentSpeed.swf", "d_JsInstrumentSpeed", "100%", "100%", "9.0.0", "/Flex/instrument/playerProductInstall.swf", "", params);
            swfobject.embedSWF("/Flex/instrument/JsInstrumentRpm.swf", "d_JsInstrumentRpm", "100%", "100%", "9.0.0", "/Flex/instrument/playerProductInstall.swf", "", params);
            
        FABridge.addInitializationCallback("b_JsFABRemoteObject", onFlexReady);
        var isFlexInited = false;
        function onFlexReady() {
            isFlexInited = true;
            getlatlangobj();
        }
        var map, latlngs, data,makerinfo;
        var rate=1;
       
        function initialize() { 
            var myOptions = {
                zoom: 13, 
                center: latlngs[0],
                streetViewControl: false,
                mapTypeControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
        }
        function getlatlangobj() {
            latlngs = [];
            makerinfo=[];
            $.getJSON("/UserManagement/GetTrackIntervalsData", 
            { 
                CarId: "<%=ViewData["carId"] %>", 
                TripId: "<%=ViewData["TripId"] %>", 
                start: "<%=ViewData["startTime"] %>",
                end: "<%=ViewData["endTime"] %>"
           },
           function(args) {
                if(args.GpsData.length>0)
                {
                    data = args.GpsData;
                    makerinfo=args.MarkInfo;
                    var millisecond = 0;
                    millisecond = ConvertStringToDate(data[data.length - 1].time).getTime() - ConvertStringToDate(data[0].time).getTime();
                    Createslider(millisecond);
                    SendGpsListToFlex(); 
                   
                }
                else
                {
                    top.MyAlert('<%=Html.GetLocateLangValue("title")%>', '<%=Html.GetLocateLangValue("nodata")%>', 'info', "top.ClosePanel('popPanel')");
                } 
            });

        }
        var AlarmMakerList;
        function AlarmMaker()
        {  
            AlarmMakerList=[]; 
           
            for (var i = 0; i < makerinfo.length; i++) {
                var lat = convertGpsData(makerinfo[i].latitude, makerinfo[i].lat_way);
                var lng = convertGpsData(makerinfo[i].longitude, makerinfo[i].long_way);
                if (isFlexInited) {
                    var arr = JsFABRemoteObject.resolveLatLng(lat, lng);    
                                
                    AlarmMakerList[i]=new google.maps.Marker({position: new google.maps.LatLng(arr[0], arr[1]), map: map}); 
                   
                  var  wincontent= "<div class='alarmcontent'><div><span><%=Html.GetLocateLangValue("alarm")%></span><span>"+makerinfo[i].day+"</span></div>";
                  var times=makerinfo[i].time.split(',');
                 for(var m=0;m<times.length;m++)
                 {
                    var list="<dl><dt style='width:120px;float:left;'> ";
                    var types=makerinfo[i].type.split(',');
                    if(m<types.length)
                    {
                        list+=types[m];
                    } 
                    list+="</dt><dd style='width:80px;float:left;'>"+times[m]+"</dd></dl></div>";
                    wincontent+=list;
                 }
                    attachSecretMessage(AlarmMakerList[i],wincontent);
                }
            }      
            
        }
        function attachSecretMessage(markers, message) {  
            var alarmimg= new google.maps.MarkerImage('/Content/Develop/images/alarmed.png', new google.maps.Size(16, 16), null,null, new google.maps.Size(16, 16));    
            markers.setIcon(alarmimg);
            var infowindow = new google.maps.InfoWindow({ 
                            content: message,
                            maxWidth: 50,
                            disableAutoPan:true
             }); 
              google.maps.event.addListener(markers, 'click', function() {
                    infowindow.open(map,markers);
              });
          }
        function DelAlarmMaker()
        { 
             for (var i = 0; i < AlarmMakerList.length; i++) {
                  AlarmMakerList[i].setMap(null);
                }   
        }
        $("document").ready(function(){
            $("#alarmshow").click(function(){     
                 if($("#alarmshow").attr("checked")==true)
                 {
                    AlarmMaker();
                 }
                 else
                 {
                    DelAlarmMaker();
                 }
             });
        });
        
        //把GPS列表给FLEX处理
        function SendGpsListToFlex() {
            for (var i = 0; i < data.length; i++) {
                var lat = convertGpsData(data[i].latitude, data[i].lat_way);
                var lng = convertGpsData(data[i].longitude, data[i].long_way);
                if (isFlexInited) {
                    var arr = JsFABRemoteObject.resolveLatLng(lat, lng);
                    latlngs[i] = new google.maps.LatLng(arr[0], arr[1]);
                }
            }
            
            initialize();

            JsFABRemoteObject.setJsGPSData(data);

            //设置初始化地图中心点
            map.setCenter(latlngs[0]);

            //设置初始化车辆marker
            marker = new google.maps.Marker({animation: "null", position: latlngs[0], map: map, icon: GetMarkerImage(0) });

            Drawtrack();

        }
        //绘制轨迹
        function Drawtrack() {
            //画轨迹
            var polylineoption = {
                strokeColor: "#0914f6",
                strokeOpacity: 1.0,
                strokeWeight: 3,
                path: latlngs
            };
            var polyline = new google.maps.Polyline(polylineoption);
            polyline.setMap(map);

        }
        function ShowAlarmMarker() { 
        
        }
        //创建拖动模块
        function Createslider(millisecond) {
            $("#myslider").slider({
                height: 30,
                width: 350,
                min: 0,
                max: millisecond,
                showTip: true,
                tipFormatter: function(value) {
                    return value;
                },
                onSlideStart: function(value) {
                    Pause();
                },
                onSlideEnd: function(value) {
                    updatePositionByTime(value);
                    Play();
                }
            });
        }
        function ConvertStringToDate(strdate) {
            var dat = null;
            if (strdate != "" || strdate != null) {
                var dt = Date.parse(strdate.replace(/-/g, "/"));
                dat = new Date(dt);
            }
            return dat;
        }
        function GetImg(digree) {
            //            console.log("old-digree:" + digree);
            if (digree != 0) {
                digree = -digree + 90;
            }
            if (digree > 360) {
                digree = digree - 360;
            }
            if (digree < 0) {
                digree = digree + 360;
            }

            var a = parseInt(digree / 22.5);
            if (digree % 22.5 > 0) {
                a += 1;
            }
            return a;
        }
        //flex調用（更新GPS点，移动Marker）
        function UpdateGps(gps, dg, dt, speed, rpm) {

             
           
            var millisecond = 0;
            if (dt != null && dt != "") {
                millisecond = dt.getTime() - ConvertStringToDate(data[0].time).getTime();
                var d=new Date(dt);                 
                $("#currentdt").text(d.getFullYear()+"-"+d.getMonth()+"-"+d.getDay()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());
            }

            $("#myslider").slider('setValue', millisecond);
            if (!isNaN(speed)) {
                document.getElementById("d_JsInstrumentSpeed").setSpeedValue(speed);
            }
            if (!isNaN(rpm)) {
                document.getElementById("d_JsInstrumentRpm").setRpmValue(rpm / 1000);
            }
 
            //改变图片
            marker.setIcon(GetMarkerImage(GetImg(dg)));
            //设置标记的地址
            //            marker.setPosition(new google.maps.LatLng(obj.lat, obj.lng));
            //            map.panTo(new google.maps.LatLng(obj.lat, obj.lng));
            var p = new google.maps.LatLng(gps.x, gps.y);
            //            console.log("地址：" + p.toString());

            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'location': p }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var address = results[0].formatted_address;
                    if (typeof address != "undefined") {
                        $("#address").text(address.replace(/邮政编码.*/g, ""));
                        //console.log("地址：" + address.replace(/邮政编码.*/g, ""));
                    }
                }
            });

            marker.setPosition(new google.maps.LatLng(gps.x, gps.y));
            map.panTo(new google.maps.LatLng(gps.x, gps.y));
        }

        function GetMarkerImage(s) {
            var num = parseInt(s);
            if (num > 0) {
                num = num - 1;
            }
            return new google.maps.MarkerImage('/Content/Develop/images/Car13.png', new google.maps.Size(32, 32), new google.maps.Point(0, 32 * num), new google.maps.Point(16, 16));
        }
        /**
        * 南北纬，东西经转换, 
        * 根据接口取得的对象，及南北纬，东西经标志
        * 把对象转换成Google的经纬度，转换后的对象不带南北纬，东西经标志
        * 
        */
        function convertGpsData(latitude, lat_way) {
            var point;
            if (lat_way == "0") {
                point = parseFloat(latitude) / 3600000 * -1;
            }
            else {
                point = parseFloat(latitude) / 3600000;
            }
            return point;
        }

        function TrackIntervals() {
            if (isFlexInited) {
                JsFABRemoteObject.setJsGPSData(data);
            }
        }
        function Play() {
            if (isFlexInited) {
                JsFABRemoteObject.onPlay();
            }
        }
        function Pause() {
            if (isFlexInited) {
                JsFABRemoteObject.onPause();
            }
        }
        function Stop() {
            if (isFlexInited) {
                JsFABRemoteObject.onStop();
            }
        }
        //加速
        function Speedup() {
            if (isFlexInited&&rate>=1&&rate<4) {
                JsFABRemoteObject.onSpeedUp();
                rate+=1;
                $("#v_rate").text(rate+"X");
            }
        }
        //减速
        function Slowdown() {
            if (isFlexInited&&rate>1&&rate<=4) {
                JsFABRemoteObject.onSpeedDown();
                 rate-=1;
                $("#v_rate").text(rate+"X");
            }
        }
        //拖动
        function updatePositionByTime(val) {
            if (isFlexInited) {
                JsFABRemoteObject.updatePositionByTime(val);
            }
        } 
       
    </script>