百度地图api画圆 标注 搜索周边功能

/*********************** 搜周边功能 开始  *******************************/

var search_zhoubian_status=0; //搜周边状态 默认关闭

var search_zhoubian_biaozhu_status=0; //搜周边快速定位状态 默认关闭

//搜周边 提交按钮
function search_zhoubian()
{
    //把搜周边状态打开
    search_zhoubian_status=1;

    //首先判断 常用位置下拉框 是不是 快速定位 
    if(document.getElementById('zhou_location').value=='0') //如果是
    {
        
        //打开 快速搜周边定位层
        document.getElementById('search_zhoubian_biaozhu').style.display='block';
 
    }


}



//搜周边 确定开始标注
function search_zhoubian_biaozhu_yes(){

        //把定位状态设置为打开
        search_zhoubian_biaozhu_status=1;

        //关闭 快速搜周边定位层
        document.getElementById('search_zhoubian_biaozhu').style.display='none';


}


//搜周边 不标注了 也不搜索了
function search_zhoubian_biaozhu_leave(){


        //把定位状态设置为关闭
        search_zhoubian_biaozhu_status=0;

 

        //关闭 快速搜周边 定位层
        document.getElementById('search_zhoubian_biaozhu').style.display='none';

        //关闭 快速搜周边 定位确认层
        document.getElementById('search_zhoubian_biaozhu_queren').style.display='none';
 
 
}

 


//搜周边 确定选此标注作为搜索中心点
function search_zhoubian_biaozhu_queren_yes(){
    

        //把定位状态设置为关闭
        search_zhoubian_biaozhu_status=0;

        //关闭 快速搜周边 定位确认层
        document.getElementById('search_zhoubian_biaozhu_queren').style.display='none';



        if(document.getElementById('zhou_location2').value!='')
        {

            var zuobiao = document.getElementById('zhou_location2').value; //获取到坐标值

                    alert('开始搜索!');

                    //异步加载显示页内容
                    $.ajax({      
                         type: "POST",       
                         url: "ajax_ceshi.php", 
                         data:"shujubao="+zuobiao,
                         dataType : "text",
                         success: function(msg){  
     
                                    document.getElementById('search_zhoubian_result').innerHTML = msg ;
     
                            } 

                      }); 



        }else{




                    alert('没有获取到中心点 请重新标注搜索位置!');


        }

                     
            

}



//搜周边 返回重新标注
function search_zhoubian_biaozhu_queren_back(){


        //关闭 快速搜周边定位确认层
        document.getElementById('search_zhoubian_biaozhu_queren').style.display='none';
 
        //打开 快速搜周边定位层
        document.getElementById('search_zhoubian_biaozhu').style.display='block';

 
        delete_circle();


}

 




/*绘制圆圈 和 圆心覆盖物 函数*/

var arr_circle_point=[];
var circle_num=1;


var arr_circle_marker=[]; //圆点 覆盖物 集合

var arr_circle_marker2=[]; //圆圈 覆盖物 集合

//绘制画圆 和 圆心
function draw_circle(x,r){

        /*
        * x 是坐标 格式为 '11.22|22.33'
        * r 是半径 单位是米
        * addtime: 2012 12 6
        */


        //先删除以前存在的
        delete_circle();


        arr_circle_point[circle_num] = new BMap.Point(x.split('|')[0], x.split('|')[1]); //圆心点



 
        /*圆点 覆盖物*/
        var circle_Icon = new BMap.Icon("/img_vv/fox.gif",new BMap.Size(30,30));

        arr_circle_marker[circle_num] = new BMap.Marker(arr_circle_point[circle_num],{icon:circle_Icon}); //在圆心标注

        map.addOverlay(arr_circle_marker[circle_num]); //圆心覆盖物 添加到地图上



        /*圆圈 覆盖物*/
        arr_circle_marker2[circle_num] = new BMap.Circle(arr_circle_point[circle_num], r);// 定义一个圆
        
                arr_circle_marker2[circle_num].setStrokeWeight(3); //设置 边的宽度
                arr_circle_marker2[circle_num].setStrokeColor('yellow'); //设置 边的颜色
                arr_circle_marker2[circle_num].setStrokeStyle('dashed'); //设置 边为虚线

        map.addOverlay(arr_circle_marker2[circle_num]);  //圆圈覆盖物 添加到地图上

        
        circle_num++;
       


}




//清空 圆 和 圆心
function delete_circle(){

      
            for(var i=1;i<=circle_num;i++)

            {

                map.removeOverlay(arr_circle_marker[i]); //删除圆心 覆盖物

                map.removeOverlay(arr_circle_marker2[i]); //删除圆圈 覆盖物

            }

 
 
}









/*********************** 搜周边功能 结束  *******************************/
                        //************ 点击地图空白区域 搜周边标注 功能  开始 ************
                        if(search_zhoubian_biaozhu_status==1)
                        {
                            
                           
                               
                                        //把此处的坐标记录下来
                                        document.getElementById("zhou_location2").value=e.point.lng+"|"+e.point.lat;                                           

                                        document.getElementById("search_zhoubian_cichu").innerHTML='此处';
                                        
                                        //左移显示出中心点来
                                        move_left(100);

 
                                        //获取 搜周边的半径范围
                                        var zhou_fanwei = document.getElementById("zhou_fanwei").value;


                                        //画出范围来
                                        draw_circle(e.point.lng+"|"+e.point.lat,zhou_fanwei); 




 




                                        //关闭标注状态
                                        search_zhoubian_biaozhu_status=0;

                                        //显示出标注最终确认层
                                        document.getElementById("search_zhoubian_biaozhu_queren").style.display="block";



                           

                        }
                        //************ 点击地图空白区域 搜周边标注 功能  结束 ************
原文地址:https://www.cnblogs.com/zhaoguoliang/p/2806502.html