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

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

时间: 2024-10-07 17:49:31

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

JS 实现显示和隐藏div(以百度地图为例)

主要参考的文章:https://my.oschina.net/xsh1208/blog/215811,https://zhidao.baidu.com/question/568774688.html 隐藏和显示div的方式有两种: 方式1:隐藏后仍占有页面空间,显示空白div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白.style="visibility: none;"document.getElementById("typediv1")

[android] 百度地图开发 (一).申请AK显示地图及解决显示空白网格问题

    最近做android百度地图,但是使用baidumapapi_v2_3_1.jar和libBaiduMapSDK_v2_3_1.so显示百度地图时总是遇到问题--只显示网格而没有显示地图,网络连接和APIKey申请都是正确的,就是不知道为什么不能显示,网上也有很多人遇到这个问题,有的是SDK更新不兼容.而且网上很多百度地图都是使用V2.3.1版本,后来没有办法只有通过baidumapapi_v2_4_1.jar完成显示地图. 其中需要注意的是使用2.3.1时调用manager.init(

Winform Echarts 显示百度地图的用法(3)

1,用Echarts 显示百度地图的用法(2)写一个 baidu.html 2,winform页面放一个WebBrowser控件,用来放地图的html页面 3,winform 加载时 将WebBrowser文件放在baidu.html同一个目录下 webBrw_Map.Url = new Uri(Path.Combine(Application.StartupPath, "baidumap.html")); 4,加载地图 (1),根据经纬度查询 var pointX = "3

Echarts 显示百度地图的用法(2)

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=vgQfNjTQDlCar24CrTIdWcwY"></script> <div id="allmap" style="height: 600px"></div><br/> <span id="ln

Android 百度地图开发(一)--- 申请API Key和在项目中显示百度地图

标签: Android百度地图API Key  分类: Android 百度地图开发(2)  最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地图入手,其实他们的用法都差不多,本篇文章就带领大家在自己的Android项目中加入百度地图的功能,接下来我会写一系列关于百度地图的文章,欢迎大家到时候关注!   一 申请API key 在使用百度地图之前,我们必须去申请一个百度地图的API key,申请地址http://lbsyun.baidu.com/a

C#显示百度地图API

http://dev.baidu.com/wiki/static/map/API/examples/?v=1.3&2_0#2&0 太原市的经纬度:112.596, 37.884 北京市的经纬度:116.404, 39.915 // JScript 文件代码示例http://dev.baidu.com/wiki/static/map/API/examples/?v=1.3&7_8#7&8 /************************地图初始化时,添加了十个自定义标注图标

百度地图开发,标记只能显示在北京地图上T_T

============问题描述============ public class MainActivity extends Activity {       MapView mMapView = null;       BaiduMap mBaiduMap; // UI相关 Button resetBtn; Button clearBtn;     @Override       protected void onCreate(Bundle savedInstanceState) {     

android学习记录(三)百度地图错误---只有一个电话显示帧,没有地图内容。

安卓开发新手百度地图,刚开始碰到一个问题,没有地图信息,还有就是它只有一帧. 如图所示: 上网寻找说是key的问题,然后又一次申请.还是不行. 最后再次看了自己的Manifest文件,发现自己的<MataData>有问题.放在了新写的Application标签里.应该放在自带的Application里面.然后,就攻克了. 部分的Manifest文件: <application android:allowBackup="true" android:icon="

网页显示百度地图 Jquery

cshtml: <div class="modal" style="visibility: hidden"> <div id="map"></div> </div> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6713c5e605ec1fdcfbe108