• 百度地图Polyline画直线BUG


    百度地图画直线时有个BUG,取三个坐标点测试,
    var point1=new BMap.Point(113.33765,23.150435);
    var point2=new BMap.Point(113.347655,23.160435);
    var point3=new BMap.Point(113.357655,23.170435);
    默认Point1到point3是从低纬度到高纬度,由于维度排序呈现递增趋势,也就是说,Point1是开始点,Point3是结束点,那么展现的地图的三个点能正常画出连线。如下图:
    var polyline = new BMap.Polyline([
      point1,
      point2,
      point3
    ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
    现在我们把专递的序列顺序调换为point1->point3->point2,那么就出现问题,直线不能完整的绘画,只连接的两个点,这是因为百度地图的Polyline对象内为对转入的坐标点按其坐标位置
    进行排序导致的,测试如下:
    var polyline = new BMap.Polyline([
      point1,
      point3,
      point2
    ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
    现在我们来测试折线是否也存在这个问题,首先我们也取同上三个坐标点,把point2经度向东移动稍微调下,使得三个点不再一条直线上。
    var point1=new BMap.Point(113.33765,23.150435);//保持不变
    var point2=new BMap.Point(113.347655,23.160435);//经度向东移动0.02为:(113.347655,23.160435)->(113.367655,23.160435)
    var point3=new BMap.Point(113.357655,23.170435);//保持不变
    绘图顺序为:
    var polyline = new BMap.Polyline([
      point1,
      point3,
      point2
    ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
    效果如下:
    为了同直线做对比,我们把坐标顺序调整为:
    var polyline = new BMap.Polyline([
      point1,
      point2,
      point3
    ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
    我们仔细观察会发现,同样的调整了坐标序列顺序,虽然折线绘画出来了所有连线(若是直线则会出现断线情况),但是只要调整了序列顺序,绘画出来的图形就会发生变化。那么我们也许会疑问,
    到底百度绘画折线的规律是什么?分析上面的列子,我们总结出Polyline对象画线的规律为:
    1.直线:(简单理解为从开始点到结束点)
              1.1 同经度时,从低纬度到高纬度。
              1.2 同纬度时,从小经度度到大经度。
    2.折线:(不分经纬度大小高低,只是按坐标序列先后依次将各个点连接)
     ==================================================测试代码=====================================
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body, html,#allmap { 100%;height: 100%;overflow: hidden;margin:0;}
    #l-map{height:100%;78%;float:left;border-right:2px solid #bcbcbc;}
    #r-result{height:100%;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(113.347655,23.160435);
    map.centerAndZoom(point, 15);
    var point1=new BMap.Point(113.33765,23.150435);
    var point2=new BMap.Point(113.347655,23.160435);
    var point3=new BMap.Point(113.357655,23.170435);
    var marker1 = new BMap.Marker(point1);  // 创建标注
    var marker2 = new BMap.Marker(point2);  // 创建标注
    var marker3 = new BMap.Marker(point3);  // 创建标注
    map.addOverlay(marker1);   
    map.addOverlay(marker2); 
    map.addOverlay(marker3); 

    var polyline = new BMap.Polyline([
      point1,
      point2,
      point3
    ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
    map.addOverlay(polyline);

    var view = map.getViewport([
      point1,
      point2,
      point3
    ]);
    map.centerAndZoom(view.center, view.zoom);
    </script>
  • 相关阅读:
    Java基础复习(1)
    mybatis中Oracle分页语句的写法
    Spring Security 入门原理及实战
    Java中的基本类型和包装类型区别
    Apache Shiro简单介绍
    linux常用命令介绍
    Spring Cloud的简单介绍
    服务端跳转和客户端跳转
    使用ajax向后台发送请求跳转页面无效的原因
    js css html加载顺序
  • 原文地址:https://www.cnblogs.com/tly0512/p/3139657.html
Copyright © 2020-2023  润新知