html 百度地图显示轨迹,百度地图,地图轨迹

百度地图,记录行动轨迹:

效果图:

0e7ec9786699cc904973a91030a89193.png

上代码:

body,

html,

#allmap {

width: 100%;

height: 100%;

overflow: hidden;

margin: 0;

font-family: "微软雅黑";

}

单个标注点沿直线的轨迹运动

// 百度地图API功能

var map = new BMap.Map("allmap");

map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);

var myP1 = new BMap.Point(116.380967, 39.913285); //起点

var myP2 = new BMap.Point(116.424374, 39.914668); //终点

var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/Mario.png", new BMap.Size(32, 70), { //小车图片

//offset: new BMap.Size(0, -5), //相当于CSS精灵

imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。

});

var driving2 = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } }); //驾车实例

driving2.search(myP1, myP2); //显示一条公交线路

window.run = function() {

var driving = new BMap.DrivingRoute(map); //驾车实例

driving.search(myP1, myP2);

driving.setSearchCompleteCallback(function() {

var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例,获得一系列点的数组

var paths = pts.length; //获得有几个点

var carMk = new BMap.Marker(pts[0], { icon: myIcon });

map.addOverlay(carMk);

i = 0;

function resetMkPoint(i) {

carMk.setPosition(pts[i]);

if(i < paths) {

setTimeout(function() {

i++;

resetMkPoint(i);

}, 100);

}

}

setTimeout(function() {

resetMkPoint(5);

}, 100)

});

}

setTimeout(function() {

run();

}, 1500);

来源:oschina

链接:https://my.oschina.net/u/4377109/blog/4304061

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/574233.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

win10微软图标点击无反应_win10开始菜单,不出来,任务栏右击无反应

使用【win】【R】快捷键打开系统的【运行】&#xff1b;输入【powershell】&#xff0c;按下【确定】运行&#xff0c;然后复制一行命令&#xff0c;点击回车键运行等待命令运行完成之后就可以了。以下是详细介绍&#xff1a;1、在键盘上按下【win】【R】键&#xff0c;使用快捷…

计算机平面设计专业有哪些课程,计算机平面设计专业课程有哪些?

说到计算机平面设计专业&#xff0c;现在也有很多同学都想了解一下这个专业&#xff0c;而且现在也有不少学校都开设有计算机平面设计专业&#xff0c;那么计算机平面设计专业课程有哪些?下面大家就跟着小编一起去了解一下吧。基础课程平面构成&#xff0c;色彩构成&#xff0…

列注释_机器学习 Pandas 03:基础 前16题 ( 带答案、注释 )

13. 字符串处理方法s pd.Series([A, B, C, Aaba, Baca, np.nan, CABA, dog, cat]) s.str.lower()# 对于Series对象&#xff0c;在其str属性中有着一系列的字符串处理方法。 # 就如同上段代码一样&#xff0c;能很方便的对array中各个元素进行运算。 # 值得注意的是&#xff0c…

域中计算机与用户,域内计算机和用户获取实现vbs代码

显示当前域内所有计算机名称及数目Const ADS_SCOPE_SUBTREE 2Set objRootDSE GetObject("LDAP://rootDSE")strDomain ObjRootDSE.Get("defaultNamingContext")Set objConnection CreateObject("ADODB.Connection")Set objCommand CreateObj…

HDU1174(空间点到直线的距离,用叉积)

爆头 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submission(s): 2002 Accepted Submission(s): 868 Problem Descriptiongameboy是一个CS高手&#xff0c;他最喜欢的就是扮演警察&#xff0c;手持M4爆土匪的头。也许这里有…

美本计算机专业,关于美国本科计算机专业排名

关于美国本科计算机专业排名1 Massachusetts Institute of Technology麻省理工学院2 Carnegie Mellon University卡内基美隆大学3 Stanford University斯坦福大学4 University of Illinois Urbana Champaign伊利诺伊大学厄本那―香槟分校5 University of California Berke…

7安装sql cent os server_Cent OS 7 编译安装 My SQL 5.7

yum -y groupinstall "Development tools"yum -y install ncurses-devel pcre-devel openssl-devel bisoncd /optwget https://nchc.dl.sourceforge.net/project/boost/boost/1.59.0/boost_1_59_0.tar.gztar -zxf boost_1_59_0.tar.gz备注&#xff1a;boost是免费的第…

计算机仿真在哪学,计算机仿真软件有哪些

虚拟机&#xff0c;如VMWARE&#xff0c;Virtual PC虚拟机软件可以在一台电脑上模拟出来若干台PC&#xff0c;每台PC可以运行单独的操作系统而互不干扰&#xff0c;可以实现一台电脑“同时”运行几个操作系统&#xff0c;还可以将这几个操作系统连成一个网络。使用虚拟机的好处…

WebApp的前端所遇问题

2015年10月1日至10月25日&#xff0c;两个本科生和一位研究生以及一位老师组成四人团队&#xff0c;开发某教育前端项目 所遇问题总结以及分享&#xff1a; 一、主要应用软件&#xff1a;sublime_text HBuilder 初学者可以在JQuery mobile的Demo中寻找代码&#xff08;可以看图…

框架的特性_Go 语言 Web 框架 Echo 系列:基础篇—通过一个例子串联各特性

通过前面的介绍&#xff0c;相信对 echo 有了一个初步的认识。本文我们通过一个简单的登录页面来串联 echo 的相关特性。因为该文主要关注各个特性&#xff0c;所以在目录结构和代码组织方面很随意。本节最终效果1)登录页面2)登录失败3)登录成功main 函数骨架使用 echo 框架&am…

计算机网络日志查询,系统资源管理_百络网警内网管理软件_电脑配置统计,系统日志,日志查询...

管理作用管理者可以使用百络网警内网gua灵活查询的分类统计网内计算机的硬件和软件信息&#xff0c;为IT资产管理提供方便和决策支持。也可以让IT管理者从多个角度来了解网络内每台计算机的全面的日志信息&#xff0c;为故障排除和网络管理提供有力支持。功能描述1、资产管理选…

乐飞天下python笔试题_滴滴2020年春招笔试题分析(Python)

数据背景来自&#xff1a;优梨&#xff1a;滴滴2020年春招Sql笔试题分析​zhuanlan.zhihu.com这里就不再重复了&#xff0c;主要描述如何使用python数据清洗问题&#xff1a;1.订单的平均应答率是多少&#xff1f;完单率是多少&#xff1f;2.每个订单的平均应答时间是多少&…

(转自http://www.blogjava.net/moxie/archive/2006/10/20/76375.html)WebWork深入浅出

&#xff08;转自http://www.blogjava.net/moxie/archive/2006/10/20/76375.html&#xff09; WebWork深入浅出 本文发表于《开源大本营》 作者&#xff1a;钱安川 前言 本篇文章并没有太多WebWork 的实战代码细节。本人非常希望能充当一名导游的角色&#xff0c;带…

南京江南贡院值得去吗_这12个地方是一种瘾,值得一去再去,有你想要去的吗?...

有人说&#xff0c;旅行就是从一个自己呆腻了的地方&#xff0c;到别人呆腻了的地方去。但大家有没有发现&#xff0c;去过许多地方&#xff0c;看过那么多风景&#xff0c;总有一些地方&#xff0c;第一次初识&#xff0c;第二次上瘾&#xff0c;第三第四次还去不腻&#xff1…

每天至少保证4个小时在学习知识

每天至少保证4个小时在学习知识转载于:https://www.cnblogs.com/ssjie/p/4929596.html

计算机学院运动会通讯稿,2021大学运动会通讯稿篇

《2021大学运动会通讯稿篇》由会员分享&#xff0c;可在线阅读&#xff0c;更多相关《2021大学运动会通讯稿篇(11页珍藏版)》请在装配图网上搜索。1、大学运动会通讯稿10篇年夜教活动会通信稿10篇年夜教活动会通信稿1咱们为您叫嚣&#xff0c;但愿给您力气给您疑心&#xff0c;…

Delphi获得计算机系统配置,用Delphi获取本地计算机名称和IP地址

下载本文示例代码本程序介绍如何获取本地计算机的名称和IP地址。   向窗体上添加两个TLabel组件、两个TEdit组件和一个TButton组件&#xff0c;设计完成的主界面如图1所示。图1 主界面  首先在程序的uses段中添加对WinSock的引用&#xff0c;然后添加一个GetHostName自定义…

vue 执行函数this_在vue中使用回调函数,this调用无效的解决

let self this //使用新变量替换this&#xff0c;以免this无效//updatestudentinfotoserver是一个将本身部分数据异步上传的接口&#xff0c;接收三个参数&#xff0c;其中第一个是数据&#xff0c;第二、三个是函数&#xff0c;第二、三个函数使用function(){}形式书写update…

ECMall2.x模板制作入门系列之2(模板标签/语法)

ECMall2.x模板制作入门系列之2&#xff08;模板标签/语法&#xff09;今天给大家带来一个模板语法的教程。希望能为ECMall模板制作者提供一份参考资料。如有问题、建议和意见&#xff0c;欢迎提出。在ECMall模板中&#xff0c;用"{"开头&#xff0c;以"}"结…

win10运行vue项目_vue+webpack在window10环境下搭建及遇到的问题

首先我搭建vuewebpackvue-strapvue-routesass时&#xff0c;我用的是直接在项目中的package.json中的“devDependencies”直接将直接需要的一些插件写上。然后用“npm install”的方式。1、首先你要安装好nodejs。2、新建项目&#xff0c;在新建的项目vue中打开输入&#xff1a…