标签：很多 page load 函数 center add 结束 图片 poi
效果如果所示，拖动地图。中间图标不动，并且自动获取地图当前中心点的经纬度。然后就可以用经纬度做其他的操作了。。。首先查看了百度地图的api。能实现这个功能最贴近的就是marker。marker可以拖拽，但是地图却动不了，我还用了另外一种是自己自定义一个marker。并且让marker相对地图位置绝对定位,地图拖拽，marker不动，拖拽结束后使用marker.getposition来获取当前位置，但是有个问题。自定义的marker在地图拖动的时候就看不见了。。应该是层级问题。让地图给挡住了。。太丑了。没办法。最后我选择第三种方案：
使用一个control来模拟，我们知道control类可以固定在地图上不动。而且一直在地图最上层，这就很棒了。我的思路是用一个自定义的control来模拟中间的固定图标，然后通过地图的获取位置方法每次结束拖动后来获取位置。
自定义control代码如下：
//这部分是我提取的一个control的公用函数
function BaseControl(offset) {
/* // 设置默认停靠位置和偏移量
this.defaultAnchor = {left:pos.left,top:pos.top};*/
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(offset.left, offset.top);
}
// 通过JavaScript的prototype属性继承于BMap.Control
BaseControl.prototype = new BMap.Control();
//创建一个基础的控件样式
function baseBtnContent() {
var div = document.createElement("div");
// 添加文字说明
var size = "2.215rem";
div.style.width = size;
div.style.height = size;
div.style.background = "no-repeat center/cover";
return div;
}
//这个是中间的固定control，我让他的背景图变成第一张图片的定位图标的样子。
function centerFixedControl(map,pos){ BaseControl.call(this,pos); this.map=map; } centerFixedControl.prototype = new BMap.Control(); centerFixedControl.prototype.initialize = function() { var div = baseBtnContent(); div.style.width="19px"; div.style.height="27px"; div.style.backgroundImage = "url(../static/images/wechatgroup/dw.png)"; var _this=this; // 添加DOM元素到地图中 this.map.getContainer().appendChild(div); // 将DOM元素返回 return div; }
function cfc(map,pos){
var control=new centerFixedControl(map,pos);
map.addControl(control);
return this;
}
然后就是把当前的控件加载到地图中
control().cfc(map,{left:172,top:117});/control.是import导入进来的整个createMapControl方法/
接下来就是在地图的拖拽事件里面获取当前的位置
this.map.addEventListener("dragend",(e)=>{
var pos=this.map.getCenter();
this.searchAround(pos);
},false);
使用map.getCenter可以和marker.getposition同样的效果，即得到一个经纬度，getCenter获取的是地图的中心点的经纬度，
然后就可以做很多，比如搜索附近
//搜索附近方法
searchAround(point){
//搜索到附近的标志建筑之后进行排序，然后显示出来
this.loadSth=true;
let _this=this;
var localSearch=new BMap.LocalSearch(point,{
onSearchComplete:(r)=>{
/* var f=localSearch.getStatus();*/
var resArr=[];
for(var i=0,len=r.length;i<len;i++){
if(r[i].vr.length>0){
resArr=resArr.concat(r[i].vr);
}
}
_this.addressArr=resArr;
_this.loadSth=false;
}
});
localSearch.setPageCapacity(10);
localSearch.searchNearby(["商场","写字楼","公交站","地铁站","银行","酒店"],point,1000);
},
ok。。结束
标签：很多 page load 函数 center add 结束 图片 poi
原文地址：http://www.cnblogs.com/yuweia/p/7941245.html
