• 百度 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)…… 表示标注点拖拽

  • 相关阅读:
    hbuilder(js+html+css)开发的APP效果实例
    基于ServiceStack.OrmLite框架 代码性能、开发效率皆第一 没有之一
    nodejs+IIS+WebMatrix
    小型设备嵌入式开发(.NET Micro Framework)
    SQL对数据进行统计、常用集合函数
    .Net Micro Framework 嵌入式开发
    js+html+css 开发App
    Dos.ORM
    ORM(ServiceStack,Moon,DbEntry,EasyDb,netnorm )
    商业款ORM servicestack llblgen
  • 原文地址:https://www.cnblogs.com/dcb3688/p/4608058.html
Copyright © 2020-2023  润新知