百度地图回放目标轨迹

PROMULGATOR

小苹果

河南省

← 验证码、字母加数字

→ js无缝滚动

相关代码

百度地图回放目标轨迹

百度地图轨迹播放代码

高德地图的点聚合

百度地图操作

百度地图api

拖动，按轨迹回放

svg轨迹动画

Html

Css

Js

body,html,#locationmap {
	width:100%;
	height:100%;
	overflow:hidden;
	margin:0;
	font-weight:600;
	font-family:"PingFangSC-Regular";
}

var city = "北京";
var map = new BMap.Map("locationmap"); // 百度地图API功能
map.centerAndZoom(city, 14); // 设置地图显示的城市和地图级别
map.enableScrollWheelZoom(); // 启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); // 启用地图惯性拖拽，默认禁用
map.addControl(new BMap.NavigationControl()); // 添加默认缩放平移控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.MapTypeControl()); // 添加地图类型控件
map.addControl(new BMap.OverviewMapControl()); // 添加缩略地图控件

$(function() {
    search();
})

function search() {

var result = [{
            "id": '1',
            "address": "故宫博物馆",
            "userid": "a1",
            "longitude": "116.404355",
            "latitude": "39.922723",
            "datetime": "2016"
        },
        {
            "id": '2',
            "address": "北海公园",
            "userid": "a2",
            "longitude": "116.396307",
            "latitude": "39.932018",
            "datetime": "2016"
        },
        {
            "id": '3',
            "address": "首都博物馆",
            "userid": "a3",
            "longitude": "116.350601",
            "latitude": "39.911434",
            "datetime": "2016"
        },
        {
            "id": '4',
            "address": "清华大学",
            "userid": "a4",
            "longitude": "116.335078",
            "latitude": "40.008106",
            "datetime": "2016"
        }
    ];
    map.clearOverlays(); // 清除标注信息
    var points = []; // 添加折线运动轨迹
    for (i = 0; i < result.length; i++) {
        var userid = result[i].userid; // 用户ID
        var longitude = result[i].longitude; // 经度
        var latitude = result[i].latitude; // 纬度
        var address = result[i].address; // 地点
        var sign_time = result[i].datetime; // 签到时间
        var point = new BMap.Point(longitude, latitude); // 填充标注点
        if (i == 0) {
            city = result[i].address;
            map.centerAndZoom(city, 14);
            map.setCenter(point); // 设置中心坐标
        }
        var tips = userid + "，" + sign_time + "，" + address;
        addMarker(point, map, tips);
        points.push(point);
    }
    var polyline = new BMap.Polyline(points);
    map.addOverlay(polyline);

}

//编写自定义函数,创建标注
function addMarker(point, map, tips) {
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    //为标注添加文字信息
    var label = new BMap.Label(tips, {
        offset: new BMap.Size(20, -10)
    });
    marker.setLabel(label);
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

百度地图回放目标轨迹



代码描述：用到百度地图

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>百度地图回放目标轨迹-jq22.com</title> <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号