百度地图JavaScript简单标点连线

背景

最近在研究轨迹数据的挖掘，第一步就是把轨迹数据在地图上可视化出来，然后再进行后续的算法研究。从一开始懵懂知道百度地图有免费的 API 可以调用，到后面知道还要上传鹰眼轨迹，最后还要从 Web 端获取上传的鹰眼轨迹，一路磕磕碰碰，快把我累惨了。
这里，只是简单地说一下 Web 端使用 JavaScript 简单描述一下如何使用百度地图，后续会对鹰眼轨迹数据上传和鹰眼轨迹数据还原写出详细博客。
那就开始吧~~

准备工作

创建应用(浏览器端)

创建应用网址

开发语言：JavaScript
开发工具：VSCode

开始

其实代码不难，有点编程基础的都能看懂百度提供的开发文档。这里我就不再赘述，自己看文档去吧。主要是注意要把自己的AK放在对应接口的参数里面就行。

开发文档

那么，就直接上代码了~~

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=U12mILhtjTORg01kEEfTvHBcurOtnxfw"></script><title>地图展示</title>
</head>
<body><div id="allmap"></div>
</body>
</html>
<script type="text/javascript">//百度地图API功能function loadJScript() {var script = document.createElement("script");script.type = "text/javascript";script.src = "http://api.map.baidu.com/api?v=2.0&ak=U12mILhtjTORg01kEEfTvHBcurOtnxfw&callback=init";document.body.appendChild(script);// console.log("我是loadJScript"); }//HTTP请求function get(url,params,callback){var request=new XMLHttpRequest();request.open("GET",url+'?'+params);request.setRequestHeader('content-type', 'application/json'); // 设置 HTTP 头，数据指定为 JSON request.onreadystatechange = function(e) {if (this.readyState == 4 && this.status == 200) {callback(request.responseText);//   console.log("request succeed."+request.responseText);}}request.send(null);}//初始化地图function init() {// console.log("我是init"); var map = new BMap.Map("allmap",{enableMapClick:false,maxZoom:20});            // 创建Map实例var pointA1 = new BMap.Point(121.334574,31.200171);//先清除所有内容map.clearOverlays();              map.enableScrollWheelZoom();                 //启用滚轮放大缩小  //设置折线箭头参数var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {scale: 0.5,//图标缩放大小strokeColor:'#fff',//设置矢量图标的线填充颜色strokeWeight: '2',//设置线宽});var icons = new BMap.IconSequence(sy, '10', '30');//坐标转换完之后的回调函数translateCallback = function (data){//设置地图中心map.centerAndZoom(data.points[0],19);//创建自定义图标var myIcon = new BMap.Icon("C:/VSCode/WorkStation/point3.png", new BMap.Size(16,16));//遍历所有的点for(var index in data.points){   // 创建标注var marker2 = new BMap.Marker(data.points[index],{icon:myIcon});  // 将标注添加到地图中 map.addOverlay(marker2);             }// 创建polyline对象//定义折线var polyline = new BMap.Polyline(data.points,{enableEditing: false,//是否启用线编辑，默认为falseenableClicking: true,//是否响应点击事件，默认为trueicons:[icons],strokeWeight:'3',//折线的宽度，以像素为单位strokeOpacity: 0.7,//折线的透明度，取值范围0 - 1strokeColor:"#1296db" //折线颜色});map.addOverlay(polyline);}var PointArr = new Array();var point0 = new BMap.Point(121.466600, 31.220800);//创建一个地理点坐标var point1 = new BMap.Point(121.470000, 31.221600);//创建一个地理点坐标var point2 = new BMap.Point(121.468300, 31.222000);//创建一个地理点坐标var point3 = new BMap.Point(121.483300, 31.235000);//创建一个地理点坐标var point4 = new BMap.Point(121.482600, 31.237100);//创建一个地理点坐标var point5 = new BMap.Point(121.482300, 31.238500);//创建一个地理点坐标var point6 = new BMap.Point(121.478100, 31.242300);//创建一个地理点坐标    PointArr.push(point0);PointArr.push(point1);PointArr.push(point2);PointArr.push(point3);PointArr.push(point4);PointArr.push(point5);PointArr.push(point6);//转化为百度地图的坐标var convertor = new BMap.Convertor();convertor.translate(PointArr,1,5,translateCallback);}  window.onload = loadJScript;  //异步加载地图</script>

效果图：

结语

一路兜兜转转最后还是回到了百度地图，一开始从百度地图(主要是不知道有鹰眼轨迹这个东西)，觉得百度地图好捞啊，然后想着自己组建个地图吧，然后去下载ArcGIS，然后再下载OpenTreeMap把对应区域的地图都弄好了，然后我发现，…em…我该怎么再自己组建的地图编程呢？
最后自己就掉进坑里面了，我又想着百度地图应该还是挺好用的吧，我看那么多的博客都用的是百度地图，又辗转回百度地图的开发文档，仔细查看每一个功能。em…原来还有鹰眼轨迹管理平台这个东西…算了，还是回转回百度地图吧…

这个故事告诉我们，科研的道路很孤单~~~

百度地图JavaScript简单标点连线相关推荐

百度地图API——多点路径连线问题
本文系作者 chaoCode原创,转载请私信并在文章开头附带作者和原文地址链接. 违者,作者保留追究权利. 前言本文是对于在项目应用有遇到的多点连线问题,我的一些解决方式,以及对于之前所学习的一些百 ...
百度地图 JavaScript API
文章目录 1.账号申请 2.创建应用 3.使用地图介绍示例 4.具体使用控件个性地图带高度的点(标记地点.覆盖物) 点击事件参考资料: 入门百度地图 JavaScript API | 8月 ...
百度地图的简单使用 ——html js
一.简介百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用,包含了构建地图基本功能的各种接口,提供了诸如本地 ...
html5 百度地图api文档,开发指南--百度地图JavaScript API大众版.doc
开发指南--百度地图JavaScriptAPI大众版开发指南--百度地图JavaScriptAPI大众版简介 JavaScript API大众版 JavaScript API功能介绍百度地图Jav ...
百度地图结合echarts实现飞线
百度地图结合echarts实现飞线目前很流行的地图轨迹飞线图,咱也来实现一个,使用百度地图和echarts图表实现,示例如下,(其实百度地图api有一个位置数据可视化MapV GL也可实现,需要的小 ...
百度地图JavaScript版api使用说明
步骤一:申请百度地图密钥: JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请 ...
浅谈百度地图的简单开发再续前缘之公交,地铁路线检索查询(六)
关于百度地图的简单开发前段时间,写过一个小系列的博客关于百度地图的基本地图,定位,全景,导航等功能做了简单的介绍.从今天开始又将准备一期有关百度地图的POI检索的等一列查询功能,如城市检索,周边检索, ...
百度地图JavaScript API GL—简易行政区划图层
map开发百度地图JavaScript API GL-简易行政区划图层 administrator 2022年6月6日简易行政区划图层更新时间:2022年3月12日简介 DistrictLay ...
百度地图JavaScript API GL
介绍百度地图JavaScript API GL v1.0是一套由JavaScript语言编写的应用程序接口. 下面通过一个简单的示例,来学习一下快速创建一张"我的地图", 百度地 ...

百度地图JavaScript简单标点连线

背景

准备工作

开始

结语

百度地图JavaScript简单标点连线相关推荐

最新文章

热门文章