百度 Javascript开发 API

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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/dcb3688/p/4608058.html