夜鹰教程网-程序员的加油站
 当前位置:文章中心 >> Css3.0_css2.0_html5
利用百度地图API制作的区域多条件搜索插件
夜鹰教程网 来源:www.yyjcw.com 日期:2017-11-3 11:10:09
利用百度地图API制作的区域多条件搜索插件

使用百度地图制作的区域多条件搜索插件

5.png

//百度地图操作
//author:pengyaou
function MapAPIHandler() {
    this.currentBdMap = null//百度地图
    this.currentCenterPoint = null//中心点坐标
    this.currentName; //中心点名称
    this.currentCenterImg; //中心点图标
    this.currentLevel; //地图级数
    this.currentDistance;
    this.flag = false;
    this.currentCircle;
    //初始化
    this.InitializeComponent = function(longitude, latitude, centerName, mapLevel) {
        this.currentLevel = mapLevel;
        this.currentName = centerName;
        this.currentCenterImg = "point.png";
        this.SetCenter(longitude, latitude, mapLevel);
        Search(this.currentDistance);
    }
 
    //传入中心点经度,纬度,地图切片级数,创建百度地图实例,并且指定中心点位置
    this.SetCenter = function(longitude, latitude, mapLevel) {
        //实例化百度地图,指定中心点
        this.currentBdMap = new BMap.Map("Map", {
           /* minZoom: mapLevel,
            maxZoom: mapLevel*/
        });
        this.currentLevel = mapLevel;
        this.currentBdMap.enableScrollWheelZoom(true);
        this.currentCenterPoint = new BMap.Point(longitude, latitude);
        this.currentBdMap.centerAndZoom(this.currentCenterPoint, mapLevel);
        this.currentDistance = this.MapDistance() /3;
        this.CreatCenter(this.currentCenterPoint, this.currentCenterImg);
    }
    this.MoveToCenter=function(){
        this.currentBdMap.panTo(this.currentCenterPoint);
    }
    //创建地图中心点标注图标
    this.CreatCenter = function(centerPoint, ico, txt) {
        var myIcon = new BMap.Icon(ico, new BMap.Size(32, 32));
        var marker2 = new BMap.Marker(this.currentCenterPoint, {
            icon: myIcon
        }); // 创建标注
        var label = new BMap.Label(this.currentName, {
            offset: new BMap.Size(20, -10)
        }); // 创建标注
        label.setStyle({
            borderColor: "#808080",
            color: "#333",
            fontSize: "12px",
            height: "20px",
            lineHeight: "20px",
            fontFamily: "微软雅黑"
        });
        marker2.setLabel(label);
        this.currentBdMap.addOverlay(marker2);
    }
 
    //根据关键字检索周边信息
    this.searchNear = function(keyWords, locationName) {
        var local = new BMap.LocalSearch(this.currentBdMap, {
            renderOptions: {
                map: this.currentBdMap
            }
        });
        local.searchNearby(keyWords, locationName);
    }
 
    //根据关键字检索周边信息
    this.SearchNewrDistance = function(keyWords, distance) {
        this.currentDistance = distance;
        var local = new BMap.LocalSearch(this.currentBdMap, {
            renderOptions: {
                map: this.currentBdMap,
                autoViewport: true
            }
        });
        local.searchNearby(keyWords, this.currentCenterPoint, distance);
 
        if (this.flag == false) {
            this.flag = true;
            var circle = new BMap.Circle(this.currentCenterPoint, this.currentDistance, {
                strokeColor: "#0075C7",
                strokeWeight: 1,
                fillColor: "#333",
                fillOpacity: 0.2,
                strokeOpacity: 0.8
            }); //创建圆
            this.currentBdMap.addOverlay(circle);
        }
    }
    //圆形范围关键字搜索
    this.SearchCircle = function(keyWords) {
        if (this.flag == false) {
            this.flag = true;
            this.currentCircle = new BMap.Circle(this.currentCenterPoint, this.currentDistance, {
            strokeColor: "#0075C7",
            strokeWeight: 1,
            fillColor: "blue",
            fillOpacity: 0.2,
            strokeOpacity:0.5
            }); //创建圆
            this.currentBdMap.addOverlay(this.currentCircle);
        }
        var locals = new BMap.LocalSearch(this.currentBdMap, {
            renderOptions: {
                map: this.currentBdMap,
                autoViewport: false
            }
        });
        var bounds = getSquareBounds(this.currentCircle.getCenter(), this.currentCircle.getRadius(), this.currentBdMap);
        locals.searchInBounds(keyWords, bounds);
 
        function getSquareBounds(centerPoi, r, map) {
            var a = Math.sqrt(2) * r; //正方形边长
            mPoi = getMecator(centerPoi, map);
            var x0 = mPoi.x,
            y0 = mPoi.y;
 
            var x1 = x0 + a / 2,
            y1 = y0 + a / 2; //东北点
            var x2 = x0 - a / 2,
            y2 = y0 - a / 2; //西南点
            var ne = getPoi(new BMap.Pixel(x1, y1), map),
            sw = getPoi(new BMap.Pixel(x2, y2), map);
            return new BMap.Bounds(sw, ne);
 
        }
        //根据球面坐标获得平面坐标。
        function getMecator(poi, map) {
            return map.getMapType().getProjection().lngLatToPoint(poi);
        }
        //根据平面坐标获得球面坐标。
        function getPoi(mecator, map) {
            return map.getMapType().getProjection().pointToLngLat(mecator);
        }
    }
 
    //获取当前地图的显示范围(距离)
    this.MapDistance = function() {
        var bs = this.currentBdMap.getBounds(); //获取可视区域
        var bssw = bs.getSouthWest(); //可视区域左下角
        var bsne = bs.getNorthEast(); //可视区域右上角
        return this.GetDistance(bssw, bsne);
    }
 
    //获取两点距离
    this.GetDistance = function(pointA, pointB) {
        return this.currentBdMap.getDistance(pointA, pointB).toFixed(0);
    }
 
    //清除所有遮罩层,同时生成中心点图标
    this.ClearAll = function() {
        this.flag = false;
        this.currentBdMap.clearOverlays();
        this.CreatCenter(this.currentCenterPoint, this.currentCenterImg);
    }
}
复制链接 网友评论 收藏本文 关闭此页
上一条: 什么样的网站适合做自适应  下一条: div块怎样实现瀑布流布局
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  热点推荐
什么是css框架
meta标签实现页面的动感效果
CSS半透明滤镜在FIREFOX和IE下面的…
div+css鼠标悬停在div上,div背景色…
纯css下拉菜单特效
div+css的浏览器兼容问题
CSS定义表格线为单一线
CSS滤镜效果收集(全)
列表显示文字和图片垂直居中对齐
在固定位置显示背景图片
网站变换图片的显示方法
在select外面套一个div或span, se…
常用的CSS命名规则
闪字闪字闪字闪字闪字闪字闪字闪字…
css让图片自动适应表格大小
  最近更新
HTTP协议实现文件断点续传
H5实现断点上传
行内元素和块级元素汇总
H5视频直播技术介绍
border-image详解
你必须知道的HTML5的新特性
html5 js控制音乐播放
HTML+CSS代码规范
css3学习笔记 transition与animat…
css3学习笔记Transform
css3学习笔记2D或3D转换
css3学习笔记文本特效
css3学习笔记颜色和透明度
css3学习笔记二
css3学习笔记一

关于我们 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3