不要忘记引用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. 什么是PCM？它和.wav文件是什么关系？

    PCM(Pulse Code Modulation----脉码调制录音).所谓PCM录音就是将声音等模拟信号变成符号化的脉冲列,再予以记录.PCM信号是由[1].[0]等符号构成的数字信号,而未经过任 ...

  2. HTTP 基础

    HTTP简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送 ...

  3. AltiumDesigner 网络标号放置技巧

    我们在使用AD画图的过程中,灵活的使用一些小技巧可以使我们的工作事半功倍,今天给大家介绍一种在画原理图过程中的小技巧. 我们在画原理图过程中经常会放置网络标号,尤其是很多芯片管脚上,例如现在我需要在这 ...

  4. [Codeforces_713A]Sonya and Queries

    题目链接 http://codeforces.com/problemset/problem/713/A 题意 三种操作: +  ai 集合里加一个整数ai,相同数记为多个.  -  ai 集合里减一个 ...

  5. 计算Python运行时间

    可以调用datetime 或者 time库实现得到Python运行时间 方法1 import datetime start_t  = datetime.datetime.now() #运行大型代码 e ...

  6. form表单验证字段学习总结

    字段的属性梳理 最重要的字段 required inital widget error_messages ----------------------------------------------- ...

  7. cloud server ribbon 自定义策略配置

    虽然ribbon默认为我们提供了多钟负载均衡策略,但有时候我们仍然需要自定义符合自身业务逻辑的规则 使用配置文件的方式:我们只需要在配置文件中添加配置 serviceId.ribbon.NFLoadB ...

  8. 序列化_Transient

    要实际的操作一下Serialize的代码Demo, 加深理解(某投行很喜欢问这个问题):transient关键字虽然目前还没有人面试过我,但是也是个考点

  9. Android TV开发 焦点控制

    转载:http://www.eoeandroid.com/thread-264177-1-1.html 最近在做一款基于Android的互联网电视客户端,开发与phone/pad差不多,但是有一个值得 ...

  10. Redhat ssh服务登录慢

    redhat在安装以后每次通过ssh服务登录,要等待几秒才能进入. 只要在sshd_config修改一下以下值就好 vim /etc/ssh/sshd_config UseDNS no service ...