不要忘记引用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>

百度地图足迹demo（多点轨迹生成）的更多相关文章

  1. 实现百度地图导航Demo的语音播报功能

    上文中实现了在本地导入百度地图导航Demo,那么在此基础上如何实现导航的语音播报呢? 一.为该应用申请语音播报(也叫注册) http://developer.baidu.com/map/index.p ...

  2. 百度地图的demo提示key验证错误！错误码：230;

    在已经有BaiduMap的APIKey后使用AndroidStudio导入Baidu地图的as版的demo,提示key验证错误!错误码:230; 首先,因为百度地图demo中用自己的keystore文 ...

  3. baidumap 百度地图，实现多点之间的带方向路线图。

    通过lastVisitAt判断时间先后. 通过三角函数验证角度 再由baidumap 会制线段 绘制三角箭头 比较难看…… 测试个人 因为框架引用baidu 有各种问题失败,为最快实现,以此页作一个独 ...

  4. javascript 百度地图API - demo

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  5. 百度地图自定义Marker

    最近写了百度地图的Demo,所以总结下遇到的问题: 1.首先在百度地图中创建应用时用到 发布版SHA1是在Preferences下的Android下的Build中;2.在使用百度地图时,先要创建一个A ...

  6. 通过百度地图API显示当前位置在地图上（图标显示）--第三方开源--百度地图（二）

    1.下载百度地图的demo,下载地址:http://lbsyun.baidu.com/sdk/download?selected=mapsdk_basicmap,mapsdk_searchfuncti ...

  7. 在Fragment中实现百度地图，定位到当前位置（基于SDKv2.1.0）

    使用最新版本的百度地图需要注意的几个地方: 1.libs文件夹下要有android-support-v4.jar.baidumapapi_v2_1_0.jar.locSDK_3.1.jar三个jar包 ...

  8. [android] 百度地图开发 (两).所在地的城市定位和城市POI搜索

    一个. 百度地图城市位置和POI搜索知识       上一篇文章"百度地图开发(一)"中讲述了怎样申请百度APIKey及解决显示空白网格的问题.该篇文章主要讲述怎样定位城市位置.定 ...

  9. 【Android】策略模式封装百度地图路线规划模块

    百度地图的Demo里有个路线规划的功能,但是,这个功能和Activity耦合性太高,所以需要单独抽离出路径规划功能,进行"解耦". 注:由于项目原因,本文只针对驾车路线规划进行封装 ...

随机推荐

  1. VM虚拟机 安装linux系统

    首先需要下载VMware10 和CentOS-6.4,我这边提供了百度网盘,可供下载链接:https://pan.baidu.com/s/1vrJUK167xnB2JInLH890fw 密码:r4jj ...

  2. 鼠标移上去触动hover致使div向上移动几个相素（动画transition轻轻的移动）

  3. mysql 数据库名称，中间带有中划线问题

    插入数据时候,引用了数据库名,数据库名中有横线,会提示错误: You have an error in your SQL syntax; check the manual that correspon ...

  4. Head First Servlets & JSP 学习笔记 第二章 —— Web应用体系结构

    Servlet没有main()方法,所以Servlet受其他人控制,这个其他人就是容器!而Tomcat就是一种容器. 容器向Servlet提供Http请求和Http响应:容器来调用Servlet的do ...

  5. php libev扩展使用

    在WorkerMan源码分析 - 实现最简单的原型文章中提到了libevent网络库,前者和libev都是事件驱动编程库高性能.简单说libev对libevent做了改进和精简.libevent使用全 ...

  6. Activity横竖屏切换时 一些数据的保存

    private VideoView videoView; 02.private static final String VIDEO_PATH = Environment 03. .getExterna ...

  7. Winrar发现损坏的压缩文件头

    解决方法: 点击"解压到"-->保留损坏文件

  8. three.js raycaster射线碰撞的坑 （当canvas大小 不是屏幕大小是解决拾取物体的办法）

    这里只是记录一下坑,方便查阅,内容主要援引自:three.js Raycaster 射线拾取 canvas不占满整屏时射线拾取存在偏差 1. 世界坐标系: 世界坐标系位于屏幕的中心(0,0,0),往右 ...

  9. 转:css知多少（12）——目录

    <css知多少>系列就此完结了.常来光顾的朋友可能会觉得突然:css的知识点还有很多,怎么突然就完了,还没讲完呢?这样说是对的.不过凡事都有一个定位,如果盲目求多,定位模糊,那样就没有目的 ...

  10. BOM心得-定时器

    写在前面的话:之前一直以为定时器的返回值是Object类型,所以timer初始化也是写null,今天发现返回值是number,进而发觉这个返回值代表的是定时器的索引,指代这是第几个定时器 个人觉得只用 ...