效果图：<!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=“https://api.map.baidu.com/api?v=2.0&ak=你的api key”></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=“icon-map.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; offsetY = 0 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>