不要忘记引用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. 转：JMeter压力测试及并发量计算

    最近的一个项目刚刚开发完,因为不是专业测试人员,所以记录下测试过程以备时间长忘记了. 一.JMeter的安装(Linux)1. 下载JMeter:这个就不细说了,直接去(http://jmeter.a ...

  2. TypeScript之定义类型 ( type )

    键值对结构的对象 export type ValidationErrors = { [key: string]: any }; 联合类型(union type) export type HttpEve ...

  3. 从零开始写bootloader(2)

    下图是设置内核启动参数的存放图示,由于bootloader启动内核时,需要给内核传输一些启动参数,但是由于当bootloader把内核 启动之后,程序就跳转到内核中执行了,再也不会回到bootload ...

  4. 解决在Mac的Vmware Fusion中装win7系统和mac原生系统直接切换win7系统分辨率变化的问题

    虚拟机 - 设置 - 显示屏 - 全屏显示retina (此选项钩去掉)

  5. echarts柱状图Demo

    echarts链接:http://gallery.echartsjs.com/editor.html?c=xB1Sfo5JbX 代码: var xData = ['a', 'b', 'c', 'd', ...

  6. 第五章 Inheritance继承

    [继承] Java不支持多重继承 - 每个子类只有一个超类. 不是将成员变量声明为静态,更好的做法是将University实例化为对象,然后使用该对象访问其成员,如下所示: [抽象类] 可以包含或者不 ...

  7. console框脱离eclipse窗口

    解决方案: 直接将视图重置. 在eclipse主窗口的最上层选项中,点击“window”选项,找到其中的“Reset Perspective”选项,点击确认即可.即视图重置.

  8. java.security.InvalidKeyException: Illegal key size 解决办法

    下载对应的文件并替换到指定目录 Java Cryptography Extension (JCE) Unlimited Strength Jurisdiction Policy Files 6 Jav ...

  9. vue2.0后台系统

    参考网址: http://www.cnblogs.com/linxin/p/6509897.html

  10. CSS学习总结1：CSS样式

    1.CSS背景 属性 background-color:为元素设置背景色,值可以是任何合法的颜色值.实例:p {background-color: gray;} background-image:为元 ...