zoukankan      html  css  js  c++  java
  • 百度地图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";
    
    
    
                               
    
                            }
                            //************ 点击地图空白区域 搜周边标注 功能  结束 ************
  • 相关阅读:
    深度通道编程模型
    缓冲区溢出实验实验楼
    团队作业(一)
    信安导论学习阶段性总结
    Python总结
    mysql下载及安装
    初识python
    MobileMenuScene来点动画效果
    移动菜单页面PlayerInput
    渲染和填充MobileMenuListItem
  • 原文地址:https://www.cnblogs.com/zhaoguoliang/p/2806502.html
Copyright © 2011-2022 走看看