js 百度地图缩放位置偏移问题

JavaScript032

js 百度地图缩放位置偏移问题,第1张

问题原理:百度地图的缩放是基于body层的,如果body层有滚动条,并且不在最顶端,在当前位置插入了百度地图,也就是出现该问题时的状态,这个时候滚轮缩放就会产生偏移。

解决办法:当地图加载的时候执行

$(window).scrollTop(0)

也就是将父元素滚动到页面最顶端

/* 地图上定位点 */

function anchorPoint(markerArr){

var point = new Array()//标注点经纬信息

var marker = new Array()//存放标注点对象

var info = new Array()//存放提示信息窗口对象的数组

var searchInfoWindow =new Array()//存放检索信息窗口对象的数组

for (var i = 0i <markerArr.lengthi++) {

var lng = markerArr[i].lng

var lat = markerArr[i].lat

point[i] = new BMap.Point(lng, lat)

marker[i] = new BMap.Marker(point[i])

if(markerArr[i].parkEmptyCount >= 20 &&markerArr[i].parkEmptyUpdateDate != null){

var icons = MAT_HOST + "/public/images/green.png"//图片路径

var icon = new BMap.Icon(icons, new BMap.Size(24, 26),{

anchor: new BMap.Size(10, 25),

infoWindowAnchor: new BMap.Size(10, 0)

})//显示图标大小

marker[i].setIcon(icon)//设置标签的图标为自定义图标

marker[i].disableMassClear()

map.addOverlay(marker[i])//将标签添加到地图中去

}

if(markerArr[i].parkEmptyCount >0 &&markerArr[i].parkEmptyCount <20 &&markerArr[i].parkEmptyUpdateDate != null){

var icons = MAT_HOST + "/public/images/orange.png"

var icon = new BMap.Icon(icons, new BMap.Size(24, 26),{

anchor: new BMap.Size(10, 25),

infoWindowAnchor: new BMap.Size(10, 0)

})

marker[i].setIcon(icon)

marker[i].disableMassClear()

map.addOverlay(marker[i])

}

if(markerArr[i].parkEmptyCount == 0 || markerArr[i].parkEmptyUpdateDate == null){

var icons = MAT_HOST + "/public/images/red.png"

var icon = new BMap.Icon(icons, new BMap.Size(24, 26),{

anchor: new BMap.Size(10, 25),

infoWindowAnchor: new BMap.Size(10, 0)

})

marker[i].setIcon(icon)

marker[i].disableMassClear()

map.addOverlay(marker[i])

}

var parkEmptyUpdateDate = markerArr[i].parkEmptyUpdateDate

parkEmptyUpdateDate = $.dateFormat({date:parkEmptyUpdateDate})

if(parkEmptyUpdateDate == ""){

markerArr[i].parkEmptyCount = "未知"

}

info[i] = '<div style="padding:5pxfont-size:12pxline-height:16px">'

info[i] += ' <p style="padding:4px 0">地址:'+markerArr[i].addr+'</p>'

info[i] += ' <p style="padding:4px 0">空车位个数:' + markerArr[i].parkEmptyCount + '</p>'

if(parkEmptyUpdateDate != ""){

info[i] += ' <p style="padding:4px 0">最后更新时间:' + parkEmptyUpdateDate

}

info[i] += '</div>'

searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {

title: '<strong>'+markerArr[i].unitName+'</strong>', //标题

width:300, //宽度

panel:"panel", //检索结果面板

enableAutoPan : true, //自动平移

searchTypes:[

BMAPLIB_TAB_SEARCH, //周边检索

BMAPLIB_TAB_TO_HERE, //到这里去

BMAPLIB_TAB_FROM_HERE //从这里出发

]

})

//鼠标移上事件

marker[i].addEventListener("mouseover", (function(k){

return function(){

searchInfoWindow[k].open(marker[k])//在marker上打开检索信息窗口

}

})(i))

map.addEventListener("click", (function(k){

return function(){

searchInfoWindow[k].close(marker[k])//在marker上打开检索信息窗口

}

})(i))

}

}

循环打印就行了