<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin:0;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<title>step1</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
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>
677
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
