Foxwx微信公众号管理软件---同心软件 -以高级编程语言进行微信公众号管理,我们一直在努力!

百度地图足迹demo(多点轨迹生成)

不要忘记引用JQuery//~~~<script src="jquery-1.7.1.min.js" type="text/javascript"></script>


好用!

<!DOCTYPE html>


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

body, html, #locationmap {width: 100%;height: 100%;overflow: hidden;margin:0;}

</style>

<script src="jquery-1.7.1.min.js" type="text/javascript"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>

<title>百度地图显示多点位置并连线</title>

</head>

<body>

<div id="locationmap"></div>

</body>

</html>

<script type="text/javascript">

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);

}



</script>


Tags: 百度地图

发布: admin 分类: HTML5 评论: 0 浏览: 598
留言列表
发表留言
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。