最近同事遇到了一个问题,找我帮忙,先说下情况:
1,页面中有一个弹出框,也就是弹出层,弹出层里面的html是实用table,
其中一个tr中使用div作为百度地图的容器
如图:
2,打开弹出层后,根据一组指定的经纬度在地图上创建marker标记,并且在可视窗口中心显示该marker
问题来了,无论是实用了panTo还是centerAndZoom,还panby
都无法让marker自动定位显示在可视窗口的中心,很多时候marker标记都在左上角,就是无法成为中心;
,同一段脚本,打开弹出层之后,点击一个定位按钮就可以正确定位,
找了度娘,又问了谷歌,也有一些人遇到了类似的问题,有人说是div不能放在table里面,
试了下发现没用,也有人说是跟地图容器隐藏和显示的问题,
这一点其实说的对的,确实跟容器有关,但是解决办法确不一定是去写个显示和隐藏容器的脚本
因为实用easyui的时候,打开弹出层什么的几乎没地方可写触发显示隐藏容器的脚本
只能硬着头皮自己想解决办法,一通熬夜,一通尝试,发现之所以没有显示在可视区域内,
并不是因为panto和centerAndZoom没有起作用,而是起作用了,而是创建的地图有问题,
试想,你有一个淡出层,左边是一些输入框,右边是地图窗口,创建地图之后,我们理所应当的认为右边
的窗口就是地图的全部了,事实却不是这样,其实是因为弹出层没有打开的情况下,创建的地图,
会按照弹出层的大小去创建地图,而不是按照弹出层中地图容器的大小去创建地图
而这就是为什么无法自动将创建的marker显示在地图窗口中心的原因
总结起来 就是 创建的地图的时机不对,在弹出层没有打开的时候去创建地图,创建的地图并不是我们想要的地方,
就会产生无法正确自动将marker标记展示在可视窗口中心的原因,因为体检创建的地图的中心不可能在可视地图窗口的中心
解决办法就更简单了
在弹出层打开以后重新创建地图对象,或者不在document.ready中创建,只在打开弹出层才创建地图
注意就是弹出层可能会多次打开,地图只创建一次就够了,自己加个flag去控制下
这类问题解决起来,几乎没什么代码可写,主要就是找到原因,就可以瞬间解决问题
相关推荐
百度地图:Marker+定位到当前位置+计算两个坐标的距离+单击marker事件
基于百度地图SDK ,实现仿滴滴打车对地图的操作,即...包括两部分功能:(1)传入地址比如北京市海淀区五道口地铁站,会在地图上地位,(2)监测到地图移动完成之后,显示Marker当前所指位置的市,区,街道,街道号。
亲测好用的百度地图海量marker性能优化,包括重写的百度方法以及个人心得
在高德地图中添加标记marker,点击marker时会弹出对应弹窗,也就是常说的气泡。
百度地图marker动画的实现,动画是基于css3的animation实现的,可以根据需求的不同修改乘不同的动画效果
完美解决百度地图聚合中的marker添加label后移动、放大缩小时label消失的问题,添加获取已经聚合点位的接口!
利用百度地图api,ThinkPHP5后台框架模拟数据,多个marker展示,marker窗口信息,点聚合
百度地图上展示多个marker的同时,能展示多个infowindow,避免只有最后一个infowindow能展示的问题。 博客地址:http://blog.csdn.net/qq_19666821/article/details/70195267
百度地图标注api在地图上选择地址后获取地址和坐标,在marker标注上添加注释在百度地图容器中创建一个地图将地址解析结果显示在地图上,并调整地图视野/启用地图拖拽事件,默认启用(可不写)启用地图滚轮放大缩小启用...
android版百度地图自定义Marker
android百度地图嵌入flutter demo 包含在flutter动态更新百度地图 调通日期是2021.5.8
如下所示: var marker = new BMap.Marker(...); //方法1 map.removeOverlay(marker); //方法2 ...以上这篇百度地图去掉marker覆盖物或者去掉maker的label文字方法就是小编分享给大家的全部内容了
实现了百度地图自定义标注,标注可以定义自己想要的图片。达到了和百度marker点击后弹出信息窗口的效果,里面有例子,和相应的图片共大家学习。
这是原文http://blog.csdn.net/android_upl/article/details/78647147
使用百度地图SDK,实现定位、LBS云检索、自定义大头针、自定义弹出框等功能。
相信只要是使用百度地图做实时定位服务的朋友都会遇到这个问题,在对坐标位置进行覆盖物展示的时候,会出现由于获取坐标数据时间或者两个坐标点相距过远,导致在视觉上看Marker移动就像“僵尸跳”一样,一蹦一蹦的给...
Android studio demo,可运行,实现marker覆盖物之间的连线,静态动态两种选择
百度地图添加自定义marker 详见:http://www.cnblogs.com/wangfengdange/p/5640867.html
百度地图API详解之事件机制,闭包机制,marker事件,信息窗口,叠加层 ,包括marker 的点击前后坐标不同的问题,都有完美的解决方案
使用百度地图api绘制热力图,并使用百度地图提供的Label结合Echarts,对地图标注点marker进行自定义提示的实例源代码