不要忘记引用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. CTF题-http://120.24.86.145:8002/flagphp/：Bugku----flag.php

    今天做了一道关于序列化的题目,收益颇多,愉快地开始. 首先,提示了“hint”,所以尝试加入hint参数.这儿没啥好说的,最后hint=1显示了重点内容.如下图所示 没错,是金灿灿的网页代码,开心,仔 ...

  2. UVa 548 Tree(二叉树最短路径)

    You are to determine the value of the leaf node in a given binary tree that is the terminal node of ...

  3. java Scanner类注意事项

    1,循环或递归调用获取数字时,不能用hasNextInt()判断是否有输入,不然会陷入死循环,应该用hasNext().获取也不能用nextInt(),应用next(),否则也会死循环 例如这段代码, ...

  4. java 基础之--反射详解

    java 反射绝大部分都位于 java.lang.reflect package 中:常用的类就是: 1.class类:代表一个类 2.field类:代表类的成员变量 3.method:代表类的方法 ...

  5. 运行SVO

    安装与运行的所有文档:https://github.com/uzh-rpg/rpg_svo/wiki 有两种安装方式: 有ros:https://github.com/uzh-rpg/rpg_svo/ ...

  6. 使用gearman进行异步的邮件或短信发送

    一.准备工作 1.为了防止,处理业务途中出现的宕机,请配置好gearman的持久化方式.2.使用gearmanManager来管理我们的worker脚本,方便测试. 上述两条请看我之前写的两篇文章 二 ...

  7. stark组件开发之URL分发和默认Handler

    为register 函数添加一个,prev参数,默认None ,用于可以让用户自己指定前缀. def register(self, model_class, handler_class=None, p ...

  8. python is 和 == 和=

    Python中有很多运算符,今天我们就来讲讲is和==两种运算符在应用上的本质区别是什么. 在讲is和==这两种运算符区别之前,首先要知道Python中对象包含的三个基本要素,分别是:id(身份标识) ...

  9. H5笔记周记

    9.4 一.介绍浏览器 1.title 主题,题目 2.url 网址  3.body 网站的内容 4.html 语言,超文本标记语言 二.文件介绍 三.标签的结构 (一些快捷键:Ctrl+s 保存   ...

  10. PS合成的5个要点：场景、对比、氛围、模糊、纹理

    是否觉得做合成打开PS之后无处下手,做完之后总觉得缺少故事情节?这一次分享的5个要点,是个人觉得需要重视的,每一点都有一个案例来让作品变得多一份惊喜.(申明:文中素材均来自网络,这里仅作分享交流作用) ...