原文:【百度地图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. Ubuntu在构建Robotframework+Selenium周围环境

    最近经历了从Windows进入系统Ubuntukylin下列.因此,测试工具也需要被重新安装,今天和共享安装过程. 我用的是环境:Ubuntu Kylin 14.04 64Bit系统. 启动权,首先, ...

  2. HDU 3829 Cat VS Dog

    题意: p个人  每一个人有喜欢和讨厌的动物  假设选出的动物中包括这个人喜欢的动物同一时候不包括他讨厌的动物那么这个人会开心  问  最多几个人开心 思路: 二分图最大独立集  利用人与人之间的冲突 ...

  3. WebAPI 15 CORS

    WebAPI 15 CORS 同源策略 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 对于同源必须要求URL在如下几个方 ...

  4. 安装framework 3.5出现0x800F0922的解决方法

    关闭Windows 防火墙,启动Windows model install服务 重启! 再安装 就ok了

  5. 【Android进阶】使用Andbase快速开发框架实现常见侧滑栏和滑动标签页组合效果

    最近闲来无事,在网上寻找源代码看,突然发现了一个国内技术牛人开发的快速开发框架Andbase,花了一天时间研究了下源码和怎么使用,现将开发常见的侧滑栏和滑动标签页组合效果的使用介绍个大家,希望可以减少 ...

  6. CentOS6.5设备MRBS

    //--------------------------------------软件必须安装-----------------------------------// # yum install –y ...

  7. 【原创】构建高性能ASP.NET站点 第五章—性能调优综述（后篇）

    原文:[原创]构建高性能ASP.NET站点 第五章-性能调优综述(后篇) 构建高性能ASP.NET站点 第五章—性能调优综述(后篇) 前言:本篇主要讲述如何根据一些简单的工具和简单的现象来粗布的定位站 ...

  8. HDU ACM 1267 下沙的沙子有几粒？-&gt;DP

    题意:m个H和n个D,从左開始数H的累积个数总不比D的累计数少的排列有多少种.比如,3个H和1个D共同拥有3种符合要求的排列H D H H,H H D H,H H  H D. 分析:状态方程为,DP[ ...

  9. oracle 打开trace，并分析trace

    SQL> oradebug event 10046 trace name context forever,level 8 ORA-00072: process "Unix proces ...

  10. wpf 9张图片的连连看

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