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

// 百度地图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);
    
//    鼠标点击经纬度集合[坐标点集合]
    var pointList = [];
//    鼠标点击经纬度集合
    var dataList = [];
    //单击获取点击的经纬度
    map.addEventListener("click",function(e){
//        存储坐标点
        pointList.push(new BMap.Point(e.point.lng, e.point.lat));
//        map.clearOverlays();//删除全部覆盖物,每点击一次清除一次全部覆盖物
        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();
    }
    
//    生成预定的多边形
    var polygonList = [];
    function addStreetPolygon(data){
//        判断是否为真实数据
        if($.isEmptyObject( data )){
            return;
        }
        
//        多边形电子围栏数据
        var boundaries = data.boundaries;
        if(!$.isEmptyObject(data.boundaries) && boundaries.length > 3){
            var pointList = [];
            $.each(boundaries, function(i, item){
                pointList.push(new BMap.Point(item.lng,item.lan));
            });
            var polygon = new BMap.Polygon(pointList, {strokeColor:"rgb(76,132,217)", fillColor:"rgb(222,230,241)", strokeWeight:2, strokeOpacity:0.8});  //创建多边形
            map.addOverlay(polygon);   //增加多边形
//            polygon.enableEditing();
        }
        
        var opts = {
          position : new BMap.Point(data.cp[0],data.cp[1]),    // 指定文本标注所在的地理位置
          offset   : new BMap.Size(20, -30)    //设置文本偏移量
        }
        var label = new BMap.Label(data.name, opts);  // 创建文本标注对象
            label.setStyle({
                 color : "red",
                 fontSize : "12px",
                 height : "20px",
                 lineHeight : "20px",
                 fontFamily:"微软雅黑"
             });
        map.addOverlay(label);  
        
        var marker = new BMap.Marker(new BMap.Point(data.cp[0],data.cp[1]));
        map.addOverlay(marker);
        
    }
    
    $scope.list_street = [];
    function initMethod(){
        $scope.list_street = bmapUtils.list_street_qixia();
        $.each($scope.list_street, function(i, item){
            addStreetPolygon(item);
        });
        
        data = bmapUtils.loadbmapfile_qixia();
        var boundaries = data.boundaries;
        var pointList = [];
        $.each(boundaries, function(i, item){
            pointList.push(new BMap.Point(item.lng,item.lan));
        });
        var polygon = new BMap.Polygon(pointList, {strokeColor:"rgb(76,132,217)", fillColor:"rgb(222,230,241)", strokeWeight:2, strokeOpacity:0.8});  //创建多边形
        map.addOverlay(polygon);
        
    }
    initMethod();

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值