问题描述:我一个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只需要创建一次,多次创建就会使得地图显示错误。