网约车地图平移方案 bMap-mapSmoothMarker

BSD
JavaScript
跨平台
2018-08-13
一枚前端
bMap-mapSmoothMarker 正在参加 2019 年度最受欢迎开源中国软件评选,请投票支持!
bMap-mapSmoothMarker 在 2019 年度最受欢迎开源中国软件评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票赢奖品
已投票

bMap-mapSmoothMarker

项目介绍

网约车地图平移方案

  • 项目依赖于 node+socket 提供数据服务

  • 前端实现类似滴滴打车小车移动、偏离路线重新规划。

  • 由于我这里实际项目中使用的百度地图,所以示例中百度地图方案成熟一些。

  • 高德地图本身自己就已经解决了平移问题,如果你项目中使用高德地图只需要 建立一个巡航器 即可,本项目中 index-gd.ejs 也有部分示例。

  • 具体实现思路请点击转移

  • 项目核心 mapSmoothMarker.js

安装教程

  1. npm install #安装依赖

  2. npm run dev #启动

  3. npm run watch #需要 pm2 依赖

mapSmoothMarker.js 注解

  • 将一个目前坐标的 carMk 平移到下一个坐标,startCar 函数

/**
  * @description 开始移动
  * @param {bMap} map 百度map实例
  * @param {Point} prvePoint 开始坐标点
  * @param {Point} newPoint 结束坐标点
  * @param {marker} marker 标注
  * @param {number} trme 完成动画秒数
  * @param {function} changeFun 每次移动触发的事件
  */
new markerTranslation().startCar(map_, oldPoint, newPoint, carMk, 2000, function (points){
    //每次平移执行的回调-频率 100 毫秒
    // console.log(points);
});//执行动画
的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

调用手机GPS实现当前位置定位并展现百度地图上

<style type="text/css"> * { height: 100%; // 设置高度,不然会显示不出来 } </style> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javasc...

2016/12/28 09:35
131
0
数据展示 带点击弹框小实例

map.clearOverlays(); var pts = []; for (var i = 0; i < data.length; i++) { var pt = new BMap.Point(data[i].lng,data[i].lat); var myIcon = null; if (data[i].dataType == "JCD" || ...

2016/06/30 11:25
68
0
根据地址查询百度坐标

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>根据地址查询经纬度</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javas...

2016/06/30 17:19
7
0
百度逆地理解析

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>...

2016/12/28 11:34
77
0
利用WeX5集成百度地图

最近做一个地图类的app 经过几天的摸索,终于完成百度地图集成的界面 先看效果: 1、加载完成之后,页面加载制定位置的地图 2、顶部能够输入地图的关键字,地图显示符合条件的下拉列表 3、用...

2016/05/27 10:21
63
0
百度离线API获取坐标和添加标注

前言:对百度地图的使用已经成为了我们生活中的一部分,对于习惯使用百度地图的朋友来说更是不可或缺。但是如果没有网络的话就不能正常使用百度地图的服务,制作一款离线地图在这个时候就显得...

2016/01/27 10:22
101
1
百度地图显示标记

百度地图

2016/07/15 10:31
9
0
百度地图API

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>定点宾馆</title> <link rel="stylesheet" href=...

2014/07/15 10:07
49
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部