原文:【百度地图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. C++ - 内置类型的最大值宏定义

    内置类型的最大值宏定义 本文地址: http://blog.csdn.net/caroline_wendy/article/details/24311895 C++中, 常常会使用, 某些类型的最大值 ...

  2. 发现SQL Server惊天大秘密！！

    原文:发现SQL Server惊天大秘密!! --set statistics xml onCREATE TABLE T_TEST(ID INT IDENTITY PRIMARY KEY,Create ...

  3. VS2010编写动态链接库DLL和单元测试，转让DLL测试的正确性

    本文将创建一个简单的动态库-link,谱写控制台应用程序使用该动态链接库,该动态链接库为"JAVA调用动态链接库DLL之JNative学习"中使用的DLL,仅仅是项目及文件名不同. ...

  4. mumu血压计母亲节“拼团”盛大开幕，百度和厂家创造一个双赢的局面

        在BAT的互联网时代.似乎不论什么新兴产品和服务都不能脱离BAT的支持,作为中国互联网体量最庞大的三家企业.BAT代表的是资源优势.用户优势.品牌优势.因此,一旦脱离BAT的支持,想迅速做大无 ...

  5. rest-work-eat-study-rest-work-eat or rest-rest-work-work-eat-eat..

    words are for your heart. tks for my dear family's ok. Listening more  means not more talkive. 版权声明: ...

  6. 于windows建筑物Cocos2d-x win32开发环境

     这份文件是从cocos2d-x复制的官网.. . 在windows7上搭建COCOS2D-X开发环境并不难. 可是因为框架更新过快,非常多用户都有困难.我希望你们觉得这个教程实用. 建议:为了避 ...

  7. Android组件系列----ContentProvider内容提供商【5】

    2.执行query()方法,查询全部记录(眼下一共两条记录).后台输出效果例如以下: 经測试,其它方法也都是能够运行的. 事实证明,新建的另外一个project文件ContentResolverTes ...

  8. JAVA缓存技术之EhCache(转)

    最近再ITEYE上看到关于讨论JAVA缓存技术的帖子比较多,自己不懂,所以上网大概搜了下,找到一篇,暂作保存,后面如果有用到可以参考.此为转贴,帖子来处:http://cogipard.info/ar ...

  9. android Intent.createChooser 应用选择

    在微博案例: 1.public void onClickShare(View view) { 2. 3. Intent intent=new Intent(Intent.ACTION_SEND); 4 ...

  10. JavaEE入境后在做什么——公共入口疑问的答案

    hi.大家好, 随着学生毕业的下一个学期,传智播客收集了许多优异的成绩或就业或普通医生分享工作经验,现在是时候让大家从发展的角度真正去聊天. 什么技术开发.我们传智播客的学员扮演什么样的角色,以及详细 ...