原文:【百度地图API】北京周边7日游——图标按路线轨迹行动

任务描述：

　　春节就要来啦~酸奶小妹的妈妈要从遥远的重庆，来到北京过春节呢！酸奶小妹忙着给妈妈计划，北京周边的旅游线路。计划好路线后，就开始驾车旅游啦~~

如何实现：

　　利用百度地图API先确定几个坐标点points，把他们连成一条折线BMap.Polyline(points)。

　　然后，更改标注图片为一辆小车，var myIcon = new BMap.Icon("car.png",...)。

　　最后利用二次开发的类K_pointmover让小车沿着折线运动。

图示：

运行代码，点击这里。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="keywords" content="百度地图,百度地图API" /><meta name="description" content="百度地图API自定义地图，按路线行驶的小车" /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>按指定路线前进的小车</title><script type="text/javascript" src="http://api.map.baidu.com/api?key=ea9710104e3349456b5e5d1191f2d376&v=1.1&services=true" ></script><script type="text/javascript" src="K_PointMover.js"></script><script type="text/javascript" src="K_Function.js"></script></head><body onload="onLoad()">    <div style="float:left;border:5px dashed #9df83e;">        <div style="width:520px;height:340px;border:1px solid gray" id="container"></div>        <div style="display:none;">            <input type="checkBox" id="MarkerMove" checked />MarkerMove            <input type="checkBox" id="MapMove" />MapMove        </div>        <p>北京周边一日游--请点击"开始"<input type="button" value="开始" onclick="pointMover.Move();" /></p>    <p>"暂停"后，可点击小车，获取当前坐标。<input type="button" value="暂停" onclick="pointMover.Pause();" /></p>    </div></body><script type="text/javascript">var map = new BMap.Map("container");    // 创建mapvar point = new BMap.Point(116.411053,39.950507);   // 确定中心点map.centerAndZoom(point,8);   // 初始化地图map,设置中心点和地图级别。var moveMarker,pointMover;function onLoad(){    var point1 = new BMap.Point(117.965625,40.962343);   // 起点1    var point2 = new BMap.Point(118.213988,39.609821);   // 中间点2    var point3 = new BMap.Point(117.211335,39.095608);   // 中间点3    var point4 = new BMap.Point(116.723807,39.53863);   // 中间点4    var point5 = new BMap.Point(116.392656,39.9080114);   // 中间点5    var point6 = new BMap.Point(115.509585,38.865845);   // 中间点6    var point7 = new BMap.Point(114.920872,40.829717);   // 中间点7    var point8 = new BMap.Point(117.965625,40.962343);   // 终点8    var points = [point1,point2,point3,point4,point5,point6,point7,point8]; //折线数组    var polyline = new BMap.Polyline(points);   //创建折线    map.addOverlay(polyline);   //绘制折线    var myIcon = new BMap.Icon("car.png", new BMap.Size(63, 42), {  //绘制小车        offset: new BMap.Size(32, 21),  // 指定定位位置        imageOffset: new BMap.Size(0,0) // 设置图片偏移    });    moveMarker = new BMap.Marker(points[0],{icon: myIcon});    map.addOverlay(moveMarker);    moveMarker.addEventListener("click",function(e){   //鼠标点击获取经纬度        alert("小车的坐标为:经度"+e.point.lng+",纬度"+e.point.lat);    });    pointMover = new K_PointMover(points,100,0.1,MapMove);  //移动函数}function MapMove(pointMover){    if(document.getElementById("MarkerMove").checked)        moveMarker.setPoint(pointMover.point);    if(document.getElementById("MapMove").checked)        map.panTo(pointMover.point);}</script></html>

备注：

　　你可以自己定义lng()和lat()，让小车移动更加平滑。

　　K_pointmover类是定义了小车移动的函数；K_function是基本的一些操作。

请到这里，右键查看源码，并下载这两个K_类。

【百度地图API】北京周边7日游——图标按路线轨迹行动的更多相关文章

  1. vue结合百度地图Api实现周边配置查询及根据筛选结果显示对应坐标详情

    在我们平常写房地产相关项目的时候经常会用到百度地图,因为这一块客户会考虑到房源周围的配套或者地铁线路所以在这类项目中就不可以避免的会用到百度地图,当然这只是其中一种,其他地图工具也可以,因为我这个项目 ...

  2. ***微信LBS地理位置开发+百度地图API(地理位置和坐标转换)

    微信公众平台开发 - 获取用户地理位置 本文介绍在微信公众平台上如何使用高级接口开发获取用户地理位置的功能. 一.获取用户地理位置接口 开通了上报地理位置接口的公众号,用户在关注后进入公众号会话时,会 ...

  3. 百度地图API开发指南

    简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...

  4. Android端百度地图API使用详解

    百度地图API简介 百度地图移动版API(Android)是一套基于Android设备的应用程序接口,通过该接口,可以轻松的访问百度服务和数据,构建功能丰富.交互性强的地图应用程序. 百度地图移动版A ...

  5. 【百度地图API】小学生找哥哥——小学生没钱打车，所以此为公交查询功能

    原文:[百度地图API]小学生找哥哥--小学生没钱打车,所以此为公交查询功能 任务描述: 有位在魏公村附近上小学的小朋友,要去北京邮电大学找哥哥.他身上钱很少,只够坐公交的.所以,百度地图API快帮帮 ...

  6. 【转载】Android端百度地图API使用详解

    转载地址:http://www.cnblogs.com/rocomp/p/4994110.html 百度地图API简介 百度地图移动版API(Android)是一套基于Android设备的应用程序接口 ...

  7. 百度地图API简介

    百度地图API简介 在此申明不是我写的,用的是别人的,仅限自己学习 百度地图移动版API(Android)是一套基于Android设备的应用程序接口,通过该接口,可以轻松的访问百度服务和数据,构建功能 ...

  8. 百度地图API的使用

    ------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...

  9. 吐槽贴：百度地图 api 封装 的实用功能 [源码下载]

    ZMap 类 功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...

随机推荐

  1. Effective C++ 条款44

    本节条款的标题是:将与參数无关的代码抽离templates 学习本节条款首先须要明确一件事情,那就是模板实例化的过程会不会反复? 我们来举个样例: #include<iostream> u ...

  2. 【DataStructure】Some useful methods about linkedList(三)

    Method 4: Gets the value of element number i For example, if list is {22, 33, 44, 55, 66, 77, 88, 99 ...

  3. 解决新版Emacs的警告：Warning (initialization): Your load-path...

    升级到新版Emacs后出现警告 作为做好用的代码编辑器之一,Emacs绝对在极客世界实用率很高.当然VIM也有很多支持者.但小编是从VIM转到Emacs的,个人觉得Emacs更好用. 小编最近升级了F ...

  4. jq实现图像旋转木马:轮焦点+关于控制+自己主动旋转木马

    资源:http://www.ido321.com/862.html html代码: 1: <!DOCTYPE html> 2: <html lang="en"&g ...

  5. vs2015基于VisualStudioOnline协同工作流程

    项目负责人登陆自己的vsonline新建项目就不多说了. 直接从邀请队友开始 项目负责人操作 被邀请的邮箱务必是可以登录visualstudio的邮箱 发送邀请后,被邀请人登陆自己的邮箱,查看邀请人发 ...

  6. SQL Server 2008性能故障排查（一）——概论

    原文:SQL Server 2008性能故障排查(一)--概论 备注:本人花了大量下班时间翻译,绝无抄袭,允许转载,但请注明出处.由于篇幅长,无法一篇博文全部说完,同时也没那么快全部翻译完,所以按章节 ...

  7. bash no such file or directory in ubuntu 1404

    我在我的今天macbook pro retina 里面安装的虚拟机ubuntu 1404. 当我试图执行cadence ncverilog时间.ubuntu终端错误"bash no such ...

  8. js 执行一个字符串类型的函数

    两种方法,一种是加括号一种是加叹号,new Function()的方法没有成功. var a = "function(args){console.log(args)}" undef ...

  9. Total Command help

  10. Web Design 再生：UX Design

    高质量的Web 模板,成熟的Design Pattern,人工智能的引用,移动技术的冲击是否标志着Web Design 结束的时代已经到来? Web Design 最终也未避免与“死亡”这个词的关联, ...