divcss2015-06-18 00:00:22 12594
使用百度地图制作的区域多条件搜索插件

//百度地图操作
//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数字上下滚动切换插件