header-bg.jpg
百度地图区域范围检索调用示例
发表于 2017-01-15 23:38
|
分类于 JavaScript
|
评论次数 0
|
阅读次数 3680

attachment/2017/01/15/4481484494681.png

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
//百度地图操作
//author:licong
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);
    }
}


发布评论
还没有评论,快来抢沙发吧!