html百度地图中心点不正确,百度地图嵌入弹出层，无法准确正确显示marker标记到中心位置的问题...

最近同事遇到了一个问题，找我帮忙，先说下情况：

1，页面中有一个弹出框，也就是弹出层，弹出层里面的html是实用table，

其中一个tr中使用div作为百度地图的容器

如图：

2，打开弹出层后，根据一组指定的经纬度在地图上创建marker标记，并且在可视窗口中心显示该marker

问题来了，无论是实用了panTo还是centerAndZoom,还panby

都无法让marker自动定位显示在可视窗口的中心，很多时候marker标记都在左上角，就是无法成为中心；

,同一段脚本，打开弹出层之后，点击一个定位按钮就可以正确定位，

找了度娘，又问了谷歌，也有一些人遇到了类似的问题，有人说是div不能放在table里面，

试了下发现没用，也有人说是跟地图容器隐藏和显示的问题，

这一点其实说的对的，确实跟容器有关，但是解决办法确不一定是去写个显示和隐藏容器的脚本

因为实用easyui的时候，打开弹出层什么的几乎没地方可写触发显示隐藏容器的脚本

只能硬着头皮自己想解决办法，一通熬夜，一通尝试，发现之所以没有显示在可视区域内，

并不是因为panto和centerAndZoom没有起作用，而是起作用了，而是创建的地图有问题，

试想，你有一个淡出层，左边是一些输入框，右边是地图窗口，创建地图之后，我们理所应当的认为右边

的窗口就是地图的全部了，事实却不是这样，其实是因为弹出层没有打开的情况下，创建的地图，

会按照弹出层的大小去创建地图，而不是按照弹出层中地图容器的大小去创建地图

而这就是为什么无法自动将创建的marker显示在地图窗口中心的原因

总结起来就是创建的地图的时机不对，在弹出层没有打开的时候去创建地图，创建的地图并不是我们想要的地方，

就会产生无法正确自动将marker标记展示在可视窗口中心的原因，因为体检创建的地图的中心不可能在可视地图窗口的中心

解决办法就更简单了

在弹出层打开以后重新创建地图对象，或者不在document.ready中创建，只在打开弹出层才创建地图

注意就是弹出层可能会多次打开，地图只创建一次就够了，自己加个flag去控制下

这类问题解决起来，几乎没什么代码可写，主要就是找到原因，就可以瞬间解决问题

html百度地图中心点不正确,百度地图嵌入弹出层，无法准确正确显示marker标记到中心位置的问题...相关推荐

百度Ueditor 富文本弹出层，如何保证点击空白处不关闭
百度Ueditor 富文本弹出层,如何保证点击空白处不关闭使用百度富文本上传图片.视频等资源时,在上传过程中如果点击了弹出层外的地方,弹出层自动关闭,上传就自动退出了,导致资源就上传失败.如何解决这 ...
vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下引入在github(https://github.com/youzan/vant-wea ...
关于百度地图最大层级聚合点鼠标覆盖弹出对话框需求实现
需要的开源库 1.MarkerClusterer.js :计算聚合点的生成 2.TextIconOverlay.js : 聚合点的图标需求: 1. 点击聚合点判断是不是最大层级:如果不是最大层级, ...
vue使用高德地图api，点击地图标记，弹出弹窗，使用animate让弹窗有动画的加载
分以下步骤一.引入高德地图 1.在高德地图--控制台--获取key 2.npm 安装 3.新建一个vue文件作为地图容器二.引入animate.css动画 1.npm 安装 2.main.js引 ...
前端echarts地图3D效果+点击地域出现弹出框可以有确定取消操作
效果图如下: 代码如下: <template><div class="about"><div id=" ...
android 百度地图3.0,android 百度地图3.0
一:为地图设置事件注意新版本中要有一个getMap mMapView.getMap().setOnMapStatusChangeListener(listener); OnMapStatusChan ...
android高德地图中心点,高德地图中心点以及自定义infowindow
jdfw.gif 基本效果图就是这个样子,录制这个软件不太好使,每次切换地点是点击确定变更的.接下来就看看地图上的功能是如何实现的: 实现的方式编写自定义的infowindow 一,书写布局样式(自 ...
使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择. 使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScrip ...
python谷歌地图查找附近地铁站_Google地图实现查找指定地点1公里范围之内的地铁站...
现在地铁这么多,确实方便了出行,但是到达一个陌生地方时,找到最近的地铁站还是有点迷茫的.网上已经有一些查找最近地铁站的应用,特别是手机应用,但是对于怎么实现的却一知半解,这篇文章就来一探究竟. 这里通 ...

html百度地图中心点不正确,百度地图嵌入弹出层，无法准确正确显示marker标记到中心位置的问题...

html百度地图中心点不正确,百度地图嵌入弹出层，无法准确正确显示marker标记到中心位置的问题...相关推荐

最新文章

热门文章