百度地图足迹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>
最新文章
- Quartz2.0以上版本的单机和集群
- Emacs学习心得之 基础操作
- find参数exec、管道符|、xargs的区别
- MySQL学习笔记——ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)
- VS2010中添加lib库引用
- NUMA
- 六种排序的C++实现
- 如何应对“改变现状”的失败"
- 一张图搞懂 Javascript 中的原型链、prototype、__proto__的关系 转载加自己的总结
- （转）SQL利用Case When Then多条件判断
- Spring 源码学习系列
- cscope和ctags自动更新
- Nacos系列：基于Nacos的配置中心
- blfs（systemv版本）学习笔记-编译安装i3-wm平铺式窗口管理器
- java元注解 @Retention注解使用
- Easyloggingpp的使用
- 关于 SqlParameter 必须知道的！
- vs中发布WebSever时启用HTTP-POST和HTTP-GET这两种协议
- delphi7 TRichView 安装
- win8.1 64位安装oracle10g客户端心得