使用百度地图做地理追踪

js部分

//百度地图
    bMapFun : function () {
        var map = new BMap.Map("map");
        var point = new BMap.Point(116.319764, 40.070091),
            reportP = new BMap.Point(116.311481, 40.072409),
            n = 1, polyline, recentP = false,
            dataPoints = [
                    reportP,//坐标1
                  new BMap.Point(116.313098, 40.072603),//坐标2
                  new BMap.Point(116.315074, 40.069511),//坐标3
                  new BMap.Point(116.317949, 40.06998),//坐标4 以此类推
                  new BMap.Point(116.325854, 40.073017),//坐标4 以此类推
                  new BMap.Point(116.311481, 40.072409)
            ];

        map.centerAndZoom(point, 16);
        map.addControl(new BMap.NavigationControl());    
        map.addControl(new BMap.ScaleControl());    
        map.addControl(new BMap.OverviewMapControl()); 
        // var marker = new BMap.Marker(point);  // 创建标注
        // map.addOverlay(marker);               // 将标注添加到地图中


        setInterval(drawPolyLine, 1000)

        function drawPolyLine()  {
            if (!!polyline)  {
                map.removeOverlay(polyline)
            }
            if (recentP)  {
                map.removeOverlay(recentP)
            }

            n = n % dataPoints.length
            console.info(n)
            if (n > 1) {
                var points = []
                for (var i = 0;i < n; i ++ ) {
                    points.push(dataPoints[i])
                }

                polyline = new BMap.Polyline(points, {strokeColor:"#f00", strokeWeight:2, strokeOpacity:0.5});
                map.addOverlay(polyline);

                
                recentP = addPoint({
                    point: points[n-1],
                    title: '现在所在位置',
                    dateTime: '2014年1月12日 14:'+n+ '5',
                    before: '30秒前'
                })

                n++
            } else {
                n = 2
            }
        }
        // var polyline = new BMap.Polyline([
        //   reportP,//坐标1
        //   new BMap.Point(116.313098, 40.072603),//坐标2
        //   new BMap.Point(116.315074, 40.069511),//坐标3
        //   new BMap.Point(116.317949, 40.06998),//坐标4 以此类推
        //   new BMap.Point(116.325854, 40.073017),//坐标4 以此类推
        //   recentP,//坐标4 以此类推
        // ], {strokeColor:"#f00", strokeWeight:2, strokeOpacity:0.5});
        // map.addOverlay(polyline);
        
        // // map.addEventListener('click', function(e) {
        // //     console.info(e.point)
        // // })

        addPoint({
            point: reportP,
            title: '报警地点',
            dateTime: '2014年1月12日 14:15',
            before: '10分钟前',
            animation: true
        })
        // addPoint({
        //     point: recentP,
        //     title: '现在所在位置',
        //     dateTime: '2014年1月12日 14:45',
        //     before: '30秒前'
        // })

        function addPoint(data)  {

            var point = data.point
            //解析地址
            var gc = new BMap.Geocoder();
            var marker = new BMap.Marker(point);  // 创建标注
            map.addOverlay(marker);               // 将标注添加到地图中

            if (!!data.animation)  {
                marker.setAnimation(BMAP_ANIMATION_BOUNCE)
            }

            //解析地址
            gc.getLocation(point, function(rs)
            {
                var addComp = rs.addressComponents;

                var address = [];

                //直辖市不显示省,因为省和市是一样的
                if (addComp.province != addComp.city)
                {
                    addComp.province ? address.push(addComp.province) : "";
                }

                addComp.city ? address.push(addComp.city) : "";
                addComp.district ? address.push(addComp.district) : "";
                addComp.street ? address.push(addComp.street) : "";
                addComp.streetNumber ? address.push(addComp.streetNumber) : "";

                address = address.join(",");

                var title = "坐标：" + point.lng + ", " + point.lat;

                var content = [];


                content.push("<p style='margin:0;'>" + title + "</p>");
                content.push("<p style='margin:0;'>地点：" + address + "</p>");
                // content.push("<p style='margin:0;'>开始时间：" + start_time + "</p>");
                // content.push("<p style='margin:0;'>最后时间：" + end_time + "</p>");
                content.push("<p style='margin:0;'>时间：" + data.dateTime + '(' + data.before + ')' + "</p>");

                content = content.join(" ");

                //添加标注信息
                var opts = { 250, enableMessage: false,title:'<p class="map-info">' + data.title + '</p>'};

                var info_window = new BMap.InfoWindow(content, opts);

                marker.infoWindow = info_window;
                marker.openInfoWindow(info_window)

                marker.addEventListener("click", function()
                {
                    this.openInfoWindow(info_window);
                });
            });

            return marker;
        }
    }

css部分

.map {height: 580px;}
.map-info {
    color: red;
    margin-top: -5px;
    margin-bottom: 7px;
    font-weight: bold;
    font-size: 1.2em;
}