首页新闻找找看学习计划

百度地图两组不同的坐标,map.pointToPixel取到的值却是一样的,求解

0
[待解决问题]

<!DOCTYPE html>
<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;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<title>折线</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.404, 39.915);
map.centerAndZoom('西宁市', 15);
map.addControl(new BMap.NavigationControl());
map.enableScrollWheelZoom();
function showInfo(e){
alert(e.point.lng + ", " + e.point.lat);
}
map.addEventListener("click", showInfo);

var polyline = new BMap.Polyline([
    new BMap.Point(101.779451, 36.634463),
    new BMap.Point(101.810389, 36.625673)
], {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
map.addOverlay(polyline);
addArrow(polyline,10,Math.PI/7);

function addArrow(polyline,length,angleValue){ //绘制箭头的函数
    var linePoint=polyline.getPath();//线的坐标串
    var arrowCount=linePoint.length;
    for(var i =1;i<arrowCount;i++){ //在拐点处绘制箭头
        console.log(linePoint[i-1])
        console.log(linePoint[i])
        console.log(map.pointToPixel(linePoint[i-1]))
        console.log(map.pointToPixel(linePoint[i]))
        var pixelStart=map.pointToPixel(linePoint[i-1]);
        var pixelEnd=map.pointToPixel(linePoint[i]);
        var angle=angleValue;//箭头和主线的夹角
        var r=length; // r/Math.sin(angle)代表箭头长度
        var delta=0; //主线斜率,垂直时无斜率
        var param=0; //代码简洁考虑
        var pixelTemX,pixelTemY;//临时点坐标
        var pixelX,pixelY,pixelX1,pixelY1;//箭头两个点
        if(pixelEnd.x-pixelStart.x==0){ //斜率不存在是时
            pixelTemX=pixelEnd.x;
            if(pixelEnd.y>pixelStart.y)
            {
                pixelTemY=pixelEnd.y-r;
            }
            else
            {
                pixelTemY=pixelEnd.y+r;
            }
            //已知直角三角形两个点坐标及其中一个角,求另外一个点坐标算法
            pixelX=pixelTemX-r*Math.tan(angle);
            pixelX1=pixelTemX+r*Math.tan(angle);
            pixelY=pixelY1=pixelTemY;
        }
        else  //斜率存在时
        {
            delta=(pixelEnd.y-pixelStart.y)/(pixelEnd.x-pixelStart.x);
            console.log(delta)
            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);
    }
}

</script>
</html>

shinylinky的主页 shinylinky | 菜鸟二级 | 园豆:230
提问于:2018-12-06 16:01
< >
分享
所有回答(1)
0

map.centerAndZoom('西宁市', 15);直接这样就会出现这个问题,改成 var point = new BMap.Point(101.780709, 36.628164);
map.centerAndZoom(point, 15);就可以了

shinylinky | 园豆:230 (菜鸟二级) | 2018-12-06 16:18
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册