首页 > 代码库 > 隐藏后重新显示 百度地图 ,地图显示不完整,只显示左上角一小部分

隐藏后重新显示 百度地图 ,地图显示不完整,只显示左上角一小部分

问题描述:我一个DIV1里,放了一个显示百度地图的mapDiv。
问题出现 了, 当初始化(第一次显示DIV1)时 ,可以 正常显示 地图,

当隐藏后 再 显示 时, 地图就 出错了,地图显示不完整,只显示左上角一小部分。

jsp代码:


<!-- 显示地图,获取经纬度    start -->

        <div id="mapModel" class="modal  fade " tabindex="-1" role="dialog"
            aria-labelledby="mapModalLabel" aria-hidden="true">
            <div class="modal-dialog ">
                <div class="modal-content bg ">
                    <div class="modal-header bj_table">
                        <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×</button>
                        <h2 class="modal-title" id="mapModalLabel">获取经纬度:</h2>
                    </div>
                    <div class="modal-body ">
                          <h2 >拖动覆盖物到目标位置,以选择经纬度:</h2>
                        <div id="mapContent" style="width:540px;height:400px;margin-top:15px"></div>

                    </div>

                </div>
            </div>
        </div>
 <!-- 显示地图,获取经纬度end -->

错误代码:

js:

//获取经纬度坐标
    $("#getCoordinate").click(function(){

        //创建地图
        initMarker=drawMap($(‘#longitude‘).val(),$(‘#latitude‘).val());

        initMarker.addEventListener("dragend", function(e) {
            if (confirm(‘确定此位置?‘)) {
               $(‘#mapModel‘).modal(‘hide‘);
               $(‘#longitude‘).val(e.point.lng);
                $(‘#latitude‘).val(e.point.lat);

            }
        });
      
    });
   

//创建地图函数:
function drawMap(longitude,latitude) {
    
    //如果经纬度为空,就把燕郊监狱设置为地图的中心点
    if(longitude==""||latitude==""){
        longitude="116.853944";
        latitude="39.934043";
    }
    
    $(‘#mapModel‘).modal();
    //定义一个中心点坐标
    var initPoint = new BMap.Point(longitude, latitude);

    var map = new BMap.Map("mapContent");//在百度地图容器中创建一个地图
    map.centerAndZoom(initPoint, 14);//设定地图的中心点和坐标并将地图显示在地图容器中
    //window.map = map;//将map变量存储在全局
    
    map.enableScrollWheelZoom();//启用地图滚轮放大缩小
    
    var initMarker = new BMap.Marker(initPoint); // 创建标注
    map.clearOverlays();
    map.addOverlay(initMarker);
    initMarker.enableDragging();

    map.panBy(270, 200);//中心点偏移多少像素(width,height)为div 宽高的1/2;
    
    
    return initMarker;
}

红色字体为出错的代码。

正确代码:

js:

var map = new BMap.Map("mapContent");//在百度地图容器中创建一个地图

//获取经纬度坐标
    $("#getCoordinate").click(function(){

        //创建地图
        initMarker=drawMap(map,$(‘#longitude‘).val(),$(‘#latitude‘).val());

        initMarker.addEventListener("dragend", function(e) {
            if (confirm(‘确定此位置?‘)) {
                //$(‘#mapContent‘).hide();
                $(‘#mapModel‘).modal(‘hide‘);
                //console.log(e.point.lng + ", " + e.point.lat);
                $(‘#longitude‘).val(e.point.lng);
                $(‘#latitude‘).val(e.point.lat);

            }
        });
      
    });
   

//创建地图函数:
function drawMap(map,longitude,latitude) {
    
    //如果经纬度为空,就把燕郊监狱设置为地图的中心点
    if(longitude==""||latitude==""){
        longitude="116.853944";
        latitude="39.934043";
    }
    
    $(‘#mapModel‘).modal();
    //定义一个中心点坐标
    var initPoint = new BMap.Point(longitude, latitude);

    //var map = new BMap.Map("mapContent");//在百度地图容器中创建一个地图   注释掉这行代码
    map.centerAndZoom(initPoint, 14);//设定地图的中心点和坐标并将地图显示在地图容器中
    //window.map = map;//将map变量存储在全局
    
    map.enableScrollWheelZoom();//启用地图滚轮放大缩小
    
    var initMarker = new BMap.Marker(initPoint); // 创建标注
    map.clearOverlays();
    map.addOverlay(initMarker);
    initMarker.enableDragging();

    map.panBy(270, 200);//中心点偏移多少像素(width,height)为div 宽高的1/2;
    
    
    return initMarker;
}


错误原因分析:var map = new BMap.Map("mapContent");只需要初始化一次,不管以后如何操作地图,map只需要创建一次,多次创建就会使得地图显示错误。



隐藏后重新显示 百度地图 ,地图显示不完整,只显示左上角一小部分