zoukankan      html  css  js  c++  java
  • vue项目,百度地图api高亮选取区域,高亮某个地区,行政区域等

    效果如下:

     1     var blist = []
     2     var districtLoading = 0
     3 
     4 
     5     var map = new window.BMap.Map("container",{ minZoom:5,maxZoom:20 });// 创建地图实例
     6     var point = new window.BMap.Point(89.48,31.57);
     7     map.centerAndZoom(point,7.4);//设置中心点坐标和地图级别
     8     map.enableScrollWheelZoom(); // 允许滚轮缩放
     9     this.zoom = map.getZoom();
    10     this.map = map;
    11     this.getBoundary();
    12 
    13 
    14 
    15 
    16 
    17     /*
    18     =====获取行政区域边界=====
    19     */
    20     getBoundary() {   
    21        this.addDistrict("西藏");
    22     },
    23     /*
    24     =====添加行政区域=====
    25     */
    26     addDistrict(districtName) {
    27       let that = this;
    28       //使用计数器来控制加载过程
    29       districtLoading++;
    30       var bdary = new BMap.Boundary();
    31       bdary.get(districtName, function (rs) {       //获取行政区域
    32           var count = rs.boundaries.length; //行政区域的点有多少个
    33           for (var i = 0; i < count; i++) {
    34             blist.push({ points: rs.boundaries[i], name: districtName });
    35           };
    36           //加载完成区域点后计数器-1
    37           districtLoading--;
    38           if (districtLoading == 0) {
    39             //全加载完成后画端点
    40             that.drawBoundary();
    41           }
    42       });
    43     },
    44     /*
    45     =====点击行政区域事件=====
    46     */
    47     click(evt) {
    48       alert(evt.target.name);
    49     },
    50     /*
    51     =====绘制边界=====
    52     */
    53     drawBoundary() {
    54       let that = this;
    55       //包含所有区域的点数组
    56       var pointArray = [];
    57       //循环添加各闭合区域
    58       for (var i = 0; i < blist.length; i++) {
    59         //添加多边形层并显示
    60         var ply = new BMap.Polygon(blist[i].points, { 
    61           strokeWeight: 2,   //边框宽度
    62           trokeColor: "#FFA96E",   //边框颜色
    63           fillColor: " #DDE4F070" //填充颜色
    64         }); //建立多边形覆盖物
    65         ply.name = blist[i].name;
    66         // ply.addEventListener("click", that.click);
    67         this.map.addOverlay(ply);
    68 
    69         //将点增加到视野范围内
    70         var path = ply.getPath();
    71         pointArray = pointArray.concat(path);
    72       }
    73 
    74       //限定显示区域(只显示特定区域,鼠标拖动松开后自动回到显示范围内),需要引用api库
    75       // var boundply = new BMap.Polygon(pointArray);
    76       // BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
    77       this.map.setViewport(pointArray);    //调整视野 
    78     },
    79    

     

  • 相关阅读:
    小球下落
    时隔半年再设环境变量。。笑哭了!
    Quartus+modelsim开发环境的搭建
    因式分解技巧——拆项与添项
    因式分解技巧——分组分解
    因式分解技巧——代公式
    因式分解技巧——提公因式
    一个2014年的数学日历
    用面积来证三角不等式
    一条直线若能平分矩形面积,则它必然经过矩形的中心
  • 原文地址:https://www.cnblogs.com/ajaxlu/p/12083934.html
Copyright © 2011-2022 走看看