共享单车之数据可视化第1关：绘制地图

最新推荐文章于 2024-06-06 09:26:02 发布

明天你好458

最新推荐文章于 2024-06-06 09:26:02 发布

阅读量2k

点赞数 3

文章标签： html5

本文链接：https://blog.csdn.net/weixin_56585699/article/details/124423761

版权

JavaScript 百度地图API 路线指示箭头绘制地图标注

关键词由CSDN通过智能技术生成

<%@ page language="java" contentType="text/html; charset=utf-8"

pageEncoding="utf-8"%>

<html>

<head>

body, html,#allmap {

width: 100%;

height: 100%;

overflow: hidden;

margin:0;

}

</style>

</head>

<body>

</body>

</html>

var map = new BMap.Map("allmap");// 创建地图实例

var point = new BMap.Point(116.10 ,38.98);// 创建点坐标

map.centerAndZoom(point, 13);//设初始化地图。如果center类型为Point时，zoom必须赋值，范围3-19级，若调用高清底图（针对移动端开发）时，zoom可赋值范围为3-18级。如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别

map.addControl(new BMap.NavigationControl());//缩放平移控件

map.enableScrollWheelZoom();//利用鼠标滚轮控制大小

var start_longitude=116.233093;//开始经度

var start_latitude=39.04607;//开始纬度

var stop_longitude=116.235352;//结束经度

var stop_latitude=39.041691;//结束纬度

var address=["乡里乡情铁锅炖南228米","擎天矿用材料有限公司北609米"];

/********** Begin **********/

//1.初始化路程线

var start_longitude=116.233093;//开始经度

var start_latitude=39.04607;//开始纬度

var stop_longitude=116.235352;//结束经度

var stop_latitude=39.041691;//结束纬度

var polyline = new BMap.Polyline([

new BMap.Point(start_longitude, start_latitude),

new BMap.Point(stop_longitude, stop_latitude)

],{strokeColor:"red",strokeWeight:3,strokeOpacity:0.5});//创建一条宽度为3外边框透明度为0.5的红色线

//2.将线添加到地图上

map.addOverlay(polyline);//将线添加到地图上

//3.调用绘制箭头线函数

addArrow(polyline,10,Math.PI/7);

//4.设置起始点标注

var marker = new BMap.Marker(new BMap.Point(start_longitude,start_latitude)); //创建开始位置标注

var marker1 = new BMap.Marker(new BMap.Point(stop_longitude,stop_latitude)); //创建开始位置标注

var label = new BMap.Label(address[0], {offset: new BMap.Size(20, 0)});//给标注设置文字描述

var label1 = new BMap.Label(address[1], {offset: new BMap.Size(20, 0)});//给标注设置文字描述

marker.setLabel(label);//将文字描述设置到标注上

map.addOverlay(marker);//将标注添加到地图中

marker1.setLabel(label1);

map.addOverlay(marker1);

/********** End **********/

//绘制箭头的函数

function addArrow(polyline,r,angle){

var linePoint=polyline.getPath();//线的坐标串（里面存的就是起始点的坐标点）

var arrowCount=linePoint.length;

for(var i =1;i<arrowCount;i++){ //在拐点处绘制箭头

var pixelStart=map.pointToPixel(linePoint[i-1]);

var pixelEnd=map.pointToPixel(linePoint[i]);

var pixelTemX,pixelTemY;//临时点坐标

var pixelX,pixelY,pixelX1,pixelY1;//定义箭头两个点坐标

var delta=(pixelEnd.y-pixelStart.y)/(pixelEnd.x-pixelStart.x);//主线斜率，垂直时无斜率

var param=Math.sqrt(delta*delta+1);//代码简洁考虑

if((pixelEnd.x-pixelStart.x)<0){ //第二、三象限

pixelTemX=pixelEnd.x+ r/param;

pixelTemY=pixelEnd.y+delta*r/param;

}else{ //第一、四象限

pixelTemX=pixelEnd.x- r/param;

pixelTemY=pixelEnd.y-delta*r/param;

}

//已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法

pixelX=pixelTemX+ Math.tan(angle)*r*delta/param;

pixelY=pixelTemY-Math.tan(angle)*r/param;

pixelX1=pixelTemX- Math.tan(angle)*r*delta/param;

pixelY1=pixelTemY+Math.tan(angle)*r/param;

var pointArrow=map.pixelToPoint(new BMap.Pixel(pixelX,pixelY));

var pointArrow1=map.pixelToPoint(new BMap.Pixel(pixelX1,pixelY1));

var Arrow = new BMap.Polyline([

pointArrow,linePoint[i],pointArrow1

], {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});

map.addOverlay(Arrow);

return Arrow;

}

</script>

明天你好458

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

共享单车之数据可视化 第1关：绘制地图

共享单车之数据可视化第1关：绘制地图