divcss2015-06-18 00:00:22 12079
使用百度地图制作的区域多条件搜索插件
//百度地图操作 //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); } }
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:百度地图区域搜索,百度地图范围搜索,百度地图API示例
文章固定链接:https://www.pengyaou.com/legendsz/front/divcss/MTEy.html
下一篇 Jq数字上下滚动切换插件