原文:【百度地图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. 一个简单的样例看明确怎样利用window.location.hash实现ajax操作时浏览器的前进/后退功能

    我们知道JavaScript中非常早就提供了window.history对象,利用history对象的forward().go().back()方法可以方便实现不同页面之间的前进.后退等这样的导航功能 ...

  2. wpf 9张图片的连连看

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

  3. C语言求素数的算法

    前言 最后一次是出了素数的问题C语言解决题目(面试),当时用了最粗暴的算法.回来细致參考资料,事实上答案有非常多种: 1,小学生版本号: 推断 x 是否为质数,就从 2 一直算到 x-1. stati ...

  4. [ACM] ZOJ 3816 Generalized Palindromic Number （DFS，暴力枚举）

    Generalized Palindromic Number Time Limit: 2 Seconds      Memory Limit: 65536 KB A number that will ...

  5. linux0.11学习笔记（2）

    makefile文件: makefile 文件是make 实用简介.make 程序是用Makefile最后一次改变的数据文件和代码文件(last-modification time)确定哪些文件需要更 ...

  6. 【Espruino】NO.06 关键是你的仆人（继续）

    http://blog.csdn.net/qwert1213131/article/details/27834551 本文属于个人理解,能力有限,纰漏在所难免.还望指正. [小鱼有点电] 这几天一直在 ...

  7. Java回合阵列List

    package com.mine.practice.arrtolist; import java.util.ArrayList; import java.util.Arrays; import jav ...

  8. myeclipse解决JSP文件script调整背景颜色

    1进口MyEclipse主题后,打开jsp要么html文件,jsvascript部分原因遭遇了一层白色的.闪避这个时候.症状,如下面: watermark/2/text/aHR0cDovL2Jsb2c ...

  9. 一个Bug的反思

    对输入数据判重,使用Map,将对象作为Key,使用map的containsKey方法来着重是否是重复记录.正常的处理流程:(1)将输入的数据封装成对象(2)判重,将没有重复的数据存储到map(3)对没 ...

  10. POJ 2762 Going from u to v or from v to u?(强连通分量+拓扑排序)

    职务地址:id=2762">POJ 2762 先缩小点.进而推断网络拓扑结构是否每个号码1(排序我是想不出来这点的. .. ).由于假如有一层为2的话,那么从此之后这两个岔路的点就不可 ...