一.在手机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)…… 表示标注点拖拽