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

巴特西

百度 Javascript开发 API

一.在手机wap上滑动地图，标准点在最中心位置

二.获取拖拽标注点后的新坐标经纬度

最新文章

热门文章