百度地图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,//是否启用线编辑,默认为false
                enableClicking: true,//是否响应点击事件,默认为true
                icons:[icons],
                strokeWeight:'3',//折线的宽度,以像素为单位
                strokeOpacity: 0.7,//折线的透明度,取值范围0 - 1
                strokeColor:"#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…原来还有鹰眼轨迹管理平台这个东西…算了,还是回转回百度地图吧…

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

  • 1
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值