原文:【百度地图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. Thanks

    今天,突然有一种爽的感觉.是做题做到爽的感觉,晚上就不是非常强烈了,脖子疼,要断了. 中午.妈妈给我打了电话,后来才知道爸爸的嗓子都哑了.说不出话来了都,哎,这都快一个月没有下雨了.地都干得要命了.好 ...

  2. 4.锁定--Java的LockSupport.park()实现分析

    LockSupport类是Java6(JSR166-JUC)引入的一个类,提供了主要的线程同步原语. LockSupport实际上是调用了Unsafe类里的函数.归结到Unsafe里,仅仅有两个函数: ...

  3. Android源代码学习之六——ActivityManager框架解析

    ActivityManager在操作系统中有关键的数据,本文利用操作系统源代码,逐步理清ActivityManager的框架,并从静态类结构图和动态序列图两个角度分别进行剖析,从而帮助开发者加强对系统 ...

  4. Mongodb安装和配置

    Mongodb之安装配置 安装 Mongodb的下载地址为Mongodb官网.下载时.你能够选择是安装包或者是压缩包. 下载完毕后.双击安装包并安装. 安装完毕后.你能够在安装文件夹看到下图中所见的文 ...

  5. 阿里2015回顾面试招收学历（获得成功offer）

    1. 引言 继上次"百度2015校园招聘面试题回顾录(成功拿到offer)"文章过后,大家都希望除了题目之外.最好能给出自己当时的回答情况,看看有没有什么回答技巧,这样更有參考价值 ...

  6. SDUT 2933-人活着系列Streetlights（最小生成树Kruskal+和理查德设置来实现）

    人活着系列之Streetlights Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描写叙述 人活着假设是为了家庭,亲情----能够说 ...

  7. 玩转Web之servlet（一）---怎样创建一个servlet

    Servlet概念:servlet就是用java编写的服务器端的小程序,用来完成下B/S架构(即浏览器和服务器架构)下客户端请求的响应处理. servlet通常在容器中运行Tomcat是常见的serv ...

  8. [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use &#39;track by&#39; expression to specify uniq

    angularjs 使用ng-repeat报错 <div ng-init="words = ['高校','高校','高校']" ng-repeat="word in ...

  9. WWDC 2014 Session 205/217 Extension 注意事项

    基于阅读下面的内容205和217的PDF做笔记.没有深入研究. 205 Creating Extensions for iOS and OS X, Part 1 217 Creating Extens ...

  10. js在方法Ajax请求数据来推断，验证无效（OnClientClick=&quot;return Method();&quot;），或者直接运行的代码隐藏

    function CheckAdd() { var flag = true; $.ajax({ cache: false, async: false, url: "/ajaxpage/get ...