其实没什么好讲的,主要是地图上的地址位置与像素位置的一个转换,还有就是搞清楚百度地图像素坐标是如何定义的(自己研究下),下面直接上代码。
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>map</title><script type="text/javascript" src="http://api./api?v=3.0&ak=你的密钥"></script><style type="text/css">html{height:100%}body{height:100%;margin:0px;padding:0px}#container{height:100%}.mapicon{position: fixed;top: 50%;left: 50%;transform: translateX(-50%) translateY(-100%);width: 52px;margin-top: -200px;}</style></head><body><div id="container"></div><img src="img/icon.png" class="mapicon" alt=""><script>/*** 主要通过地图的地理位置与像素转换实现效果*/var map = new BMap.Map("container");var point = new BMap.Point(116.404, 39.915);/*** Y轴偏移量,即地图可视区域中心点在Y轴的偏移量* 当你的地图底部还有一些输入框的时候,可视区域集中在* 手机的上部,增加偏移量能够将定位地点上移到可视区的* 中间,这个量根据页面情况自行设定* @type {number}*/var offsetY = 200;map.centerAndZoom(point, 15);var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r){if(this.getStatus() === BMAP_STATUS_SUCCESS){var mk = new BMap.Marker(r.point);map.addOverlay(mk);//将地图中心移动到可视区中点map.panTo(r.point);var centerPixel = map.pointToOverlayPixel(map.getCenter());//通过设置地图的中心点,使定位点显示在手机上部分区域map.setCenter(map.overlayPixelToPoint({x:centerPixel.x,y:centerPixel.y+offsetY}));map.addEventListener('dragend',function(){//获得移动之后地图中心点的像素位置var pixel = map.pointToOverlayPixel(map.getCenter());//获得定位图标所在位置在地图上的地理位置,实际上定位图标的像素位置就在地图中心像素位置相应的偏移量处var Point = map.overlayPixelToPoint({x:pixel.x,y:pixel.y-offsetY});var mkn = new BMap.Marker(Point);map.addOverlay(mkn);});}else {alert('failed'+this.getStatus());}});</script></body></html>