百度地图多轨迹示例

最近项目需要接百度地图，就研究了下热力图和轨迹图。

做的过程中发现轨迹图的资料非常少，特别是多轨迹的。现在我弄出来了就分享下多轨迹的写法，希望大家少走弯路：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html {height: 100%
}body {height: 100%;margin: 0px;padding: 0px
}#container {height: 100%
}
</style>
<script type="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=9LW9kU9jKiN1lDg8dClq8MRoMjURC0Es"></script>
</head><body><div id="container"></div><script type="text/javascript">/* 创建地图并添加控件begin */var map = new BMap.Map("container");map.centerAndZoom(new BMap.Point(121.421, 29.326), 13);map.addControl(new BMap.NavigationControl());map.addControl(new BMap.ScaleControl());map.addControl(new BMap.OverviewMapControl());map.addControl(new BMap.MapTypeControl());map.setCurrentCity("北京");/* 创建地图并添加控件end  *//** 三组示例坐标begin */var points = [ [ 121.42108474805796, 29.38674132050806 ],[ 121.42098523703464, 29.346739501953575 ],[ 121.43128777833854, 29.350523790258323 ],[ 121.42018950170755, 29.225924439068476 ] ];showPolyLine(points, "red");var points = [ [ 121.41108474805796, 29.32674132050806 ],[ 121.42098523703464, 29.326739501953575 ],[ 121.43128777833854, 29.310523790258323 ],[ 121.45018950170755, 29.3825924439068476 ] ];showPolyLine(points, "blue");var points = [ [ 121.51508474805796, 29.32674132050806 ],[ 121.42798523703464, 29.328739501953575 ],[ 121.43328777833854, 29.314523790258323 ],[ 121.45718950170755, 29.327924439068476 ] ];showPolyLine(points, "green")/* 三组示例坐标begin */function showPolyLine(points, color) {/* points[][]数据结构为二维数组，这里转换为Marker，再将多个marker点放入pline，组成一条线  begin */var pLine = [];for (var i = 0; i < points.length; i++) {pLine.push(new BMap.Point(points[i][0], points[i][1]));if (i == 0 || i == points.length - 1) {//起点终点图标map.addOverlay(new BMap.Marker(new BMap.Point(points[i][0],points[i][1])));}}/* points[][]数据结构为二维数组，这里转换为Marker，再将多个marker点放入pline，组成一条线  end *//* 添加轨迹接口begin */var polyline = new BMap.Polyline(pLine, {strokeColor : color,strokeWeight : 6,strokeOpacity : 0.5});map.addOverlay(polyline);/* 添加轨迹接口begin */};</script>
</body>
</html>

很简单的示例，这是运行效果：

实际项目上用时，把坐标转成数组传到页面就行了。

百度地图多轨迹示例相关推荐

百度地图鹰眼轨迹服务
这里写目录标题百度地图鹰眼轨迹服务鹰眼轨迹服务概述: 鹰眼轨迹服务基本概念: 权限与配额: 创建鹰眼服务: 获取服务id: 终端管理: 添加entity: 添加entity自定义字段: 更新ent ...
echarts地图文字重叠解决方案_ECharts 和百度地图的叠加示例（下）
前言汇总了几个 ECharts 地图和百度地图在可视化展示时的综合示例. 主要是在 ECharts 地图和百度地图上叠加展示一些数字.图片.其它图表和轨迹动画. 另外因为每个示例的代码配置项比较繁琐 ...
百度地图实现轨迹回放（显示到达时间）
使用了百度路书直接上代码,添加秘钥直接运行 <!DOCTYPE html> <html> <head><meta http-equiv="Cont ...
百度地图描绘轨迹html,百度地图API 绘制轨迹历史
DOCTYPE html> 2 3 4 5 6 7 body, html{width:100%;height:100%;overflow:hidden;margin:0;font-family: ...
百度地图js轨迹展示
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak= ...
百度地图开发之——百度地图鹰眼轨迹管理台DEMO-v3部署到服务器上
百度地图开发官方下载口:https://github.com/baidu-openmap-trace/web-demo-v3 第一:部署准备搭建NPM和FIS3的环境 1.安装node.js:htt ...
百度地图运行轨迹根据车速显示不同颜色线
最近有个需求是想根据车速划分不同的车速区间,并且在画运行轨迹的时候需要切换不同颜色的线.百度地图它有画运行轨迹的API,不过是根据一系列的经纬度来画一条线,但是只是展示一种颜色.网上百度了也没有发现有 ...
vue引入百度地图实现轨迹绘制
引入 cnpm i --save vue-baidu-map main.js import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {ak: 'U ...
百度地图坐标点轨迹画线php,百度地图绘制轨迹点
没有后台获取事实信息都是伪数据- -轨迹信息做不到事实导航. 控件可以根据自己的需求添加位置通过offset:new BMAP.Size(x,y)进行微调事实路况信息需要通过引没有后台获取事实信 ...

百度地图多轨迹示例

百度地图多轨迹示例相关推荐

最新文章

热门文章

百度地图 多轨迹 示例

百度地图 多轨迹 示例相关推荐

最新文章

热门文章

百度地图多轨迹示例

百度地图多轨迹示例相关推荐