一.在手机wap上滑动地图，标准点在最中心位置
map.getCenter()
1.当移动地图时，点同时移动，获取屏幕中心点
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=25eb303c9c5df0ec2424fa86816437da"></script>
<title>拖拽地图，标注点始终在屏幕最中心点</title>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
marker.enableDragging(); // 支持拖拽
// 地图拖拽加载完成
map.addEventListener("tilesloaded", function () {
map.clearOverlays(); // 清除标注点
var point = new BMap.Point(map.getCenter().lng, map.getCenter().lat);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
//将标注点保存在DOM 中
$("#point").attr('lng',map.getCenter().lng);
$("#point").attr('lat',map.getCenter().lat);
});
</script>
</body>
</html>
2.当移动地图时，点始终定位在屏幕最中心
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的地址</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=25eb303c9c5df0ec2424fa86816437da"></script> <style> * { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; } body { background-color: #fff; } #footer { background-color: #ff3f00; text-align: center; font-size: 16px; line-height: 50px; } .map_container { width: 100%; position: fixed; /*top: 50px;*/ left: 0; overflow: auto; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; } .map_tip { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; top: -155px; width: 100%; height: 52px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-pack: center; -webkit-box-pack: center; box-pack: center; -webkit-justify-content: center; justify-content: center; z-index: 99; } .map_tip div.map_address { background-color: #fff; display: inline-block; min-width: 20%; max-width: 80%; height: 100%; line-height: 26px; font-size: 14px; border: 1px solid #aaa; color: #000; padding: 0 8px; border-radius: 5px; position: relative; z-index: 100; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-pack: center; -webkit-box-pack: center; box-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-box-align: center; box-align: center; -webkit-align-items: center; align-items: center; } .map_tip div.map_address:after { display: block; content: ''; width: 20px; height: 20px; background-color: #fff; transform: rotate(45deg); position: absolute; bottom: -12px; left: 50%; margin-left: -10px; border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; z-index: 98; } .map_tip div.map_address p { position: relative; z-index: 99; } .map_tip div.map_address p:last-child { color: #666; } .map_tip .map_address_img { position: absolute; left: 50%; bottom: -3.7037037rem; width: 0.96296296rem; height: 2.37037037rem; margin-left: -0.48148148rem; } .map_tip .map_address_img img { width: 100%; height: 100%; } #map { width: 100%; } #allmap { width: 100%; height: 100%; } </style> </head> <body> <div class="map_container"> <div class="map_tip"> <div class="map_address"> <p class="address_name"></p> <p class="address_info"></p> </div> <div class="map_address_img"><img src="http://bpic.588ku.com/element_origin_min_pic/00/46/69/6756d785841e646.jpg" alt=""></div> </div> <div id="map"> <div id="allmap"></div> </div> </div> <script src="js/jquery.min.js"></script> <script> var height = $(window).height() - $('#header').height() - $('#footer').height(); $('#map').height(height); var map = new BMap.Map("allmap"); var point = new BMap.Point(108.95, 34.27); map.centerAndZoom(point, 18); var gc = new BMap.Geocoder(); 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);//地图中心移动 getInfo(r.point.lng, r.point.lat); map.addEventListener("moveend", function () { var new_r = map.getCenter(); getInfo(new_r.lng, new_r.lat); }); } else { alert('failed' + this.getStatus()); } }, {enableHighAccuracy: true}); function getInfo(lng, lat) { var point = new BMap.Point(lng, lat);//用所定位的经纬度查找所在地省市街道等信息 gc.getLocation(point, function (rs) { // var info= rs.addressComponents; $('.address_name').html(rs.address); // $('.address_info').html(info.district) }); } </script> </body> </html>
二.获取拖拽标注点后的新坐标经纬度
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=25eb303c9c5df0ec2424fa86816437da"></script>
<title>获取拖拽标注点后的新坐标经纬度</title>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
marker.enableDragging(); // 支持拖拽
// 拖拽标注点
marker.addEventListener("dragend", function (e) {
//获取覆盖物位置
var o_Point_now = marker.getPosition();
var lng = o_Point_now.lng;
var lat = o_Point_now.lat;
//$("#point").attr('lng', map.getCenter().lng);
//$("#point").attr('lat', map.getCenter().lat);
});
</script>
</body>
</html>
*注： map.addEventListener("dragend", function (e)…… 表示地图拖拽
marker.addEventListener("dragend", function (e)…… 表示标注点拖拽