百度地图鼠标点击生成多边形

HTML


<div id="main" style="height:500px;"></div>

<button class="layui-btn" data-ng-click="getPointData()">
  <i class="layui-icon">&#xe608;</i> 查看围栏数据
</button>
<button class="layui-btn" data-ng-click="gotoClean()">
  <i class="layui-icon layui-icon-delete"></i> 清空数据
</button>

<!-- <button class="layui-btn" data-ng-click="isCleanAll = false"> -->
<!--   <i class="layui-icon layui-icon-close"></i> 仅清除多边形 -->
<!-- </button> -->
<!-- <button class="layui-btn" data-ng-click="isCleanAll = true"> -->
<!--   <i class="layui-icon layui-icon-close-fill"></i> 清除全部 -->
<!-- </button> -->

<textarea cols="20" rows="50" style="width: 100%;height: 200px;" data-ng-model="polygon"></textarea>

<button class="layui-btn" data-ng-click="localSearch()">
  <i class="layui-icon layui-icon-refresh"></i> 搜索关键字
</button>
<textarea placeholder="请输入搜索内容" class="layui-textarea" data-ng-model="name"></textarea>




js




// 百度地图API功能
    var map = new BMap.Map("main", {enableMapClick:false});
    map.centerAndZoom(new BMap.Point(118.890476,32.139507), 13);
    map.enableScrollWheelZoom();
    
//    定位并移动到当前所在城市
    function myFun(result){
        var cityName = result.name;
        map.setCenter(cityName);
    }
    var myCity = new BMap.LocalCity();
    myCity.get(myFun);
    
    
    $scope.isCleanAll = true;
//    鼠标点击经纬度集合[坐标点集合]
    var pointList = [];
//    鼠标点击经纬度集合
    var dataList = [];
    //单击获取点击的经纬度
    map.addEventListener("click",function(e){
//        存储坐标点
        pointList.push(new BMap.Point(e.point.lng, e.point.lat));
        console.log($scope.isCleanAll);
//        是否删除全部覆盖物[每次点击重绘覆盖物,只保留多边形]
        if($scope.isCleanAll){
            map.clearOverlays();//删除全部覆盖物,每点击一次清除一次全部覆盖物
        }else{
            map.removeOverlay(polygon);//删除指定覆盖物[多边形]
        }
        
//        生成多边形
        printMap();
        
//        存储经纬度
        var data = {};
        data.lng = e.point.lng;
        data.lan = e.point.lat;
        dataList.push(data);
    });
    
//    生成多边形方法
    var polygon = {};
    function printMap(){
        polygon = new BMap.Polygon(pointList, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  //创建多边形
        map.addOverlay(polygon);   //增加多边形
    }
    
//    获取经纬度json字符串集合
    $scope.polygon = '';
    $scope.getPointData = function (){
        $scope.polygon = '';
        $.each(dataList, function(i, item){
            $scope.polygon += '{"lng":"'+item.lng+'","lan":"'+item.lan+'"},'
        });
    }
    
//    POI搜索
    $scope.name = '';
    $scope.localSearch = function (){
        pointList = [];
        dataList = [];
        $scope.polygon = '';
        map.removeOverlay(polygon);
        
        var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map}
        });
        local.search($scope.name);
    }
    
//    清除数据
    $scope.gotoClean = function (){
        pointList = [];
        dataList = [];
        $scope.polygon = '';
        map.clearOverlays();
    }

 

 

 

 

 

转载于:https://my.oschina.net/wangweizhen/blog/3010475