`
fox_mt
  • 浏览: 24034 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多

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

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

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

如图:

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

解决办法就更简单了

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

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

 

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

分享到:
评论

相关推荐

    地图点击弹出div层

    4. 添加标记:使用`BMap.Marker`类创建标记,设置标记的位置,然后将其添加到地图上。 5. 监听点击事件:为地图实例添加点击事件监听器,当用户点击地图时,触发事件处理函数。 6. 创建并显示div层:在点击事件处理...

    初学百度地图demo

    在百度地图API中,我们可以使用`InfoWindow`类创建弹出层,并在需要时显示或关闭。 4. **获取当前位置信息**: 百度地图API提供了获取用户当前位置的能力,这通常通过调用`BMap.Geolocation`服务实现。该服务会...

    JSP页面使用百度地图定位

    接下来,可以创建Marker对象表示定位点,将其设置到地图上。此外,还可以添加InfoWindow显示详细位置信息。 以下是一个简单的示例: ```jsp ;charset=UTF-8" language="java" %> <!DOCTYPE html> ...

    百度地图api infoBox

    在使用百度地图API进行Web开发时,InfoBox是一个非常重要的组件,它用于在地图上创建可自定义的弹出窗口,通常用来展示地图上的标记点详细信息。InfoBox可以包含HTML内容,允许开发者构建丰富的交互式信息窗口。 **...

    GMap地图控件GMarkerOverlay使用例程

    4. **添加GMarkerOverlay到地图**: 最后,将GMarkerOverlay添加到GMapControl的地图层上,使得所有的标记都能够在地图上看到。通常,这一步骤是通过调用GMapControl的Overlays.Add方法完成的。 除了基本的标记展示...

    jquery地图标记提示特效代码

    这个提示信息通常是一个弹出框或者一个定位在标记上方的浮动层,包含与标记相关的信息,如地点名称、地址、简介等。 ```javascript $(document).ready(function() { // 假设你的标记已存在,具有"data-tooltip...

    Google Maps API开发大全 源码

    2. 地标与标记:你可以添加自定义图标或者文本标签到地图上,以表示特定的位置或信息。这通常用于标记店铺、景点或其他兴趣点。 3. 信息窗口:当用户点击标记时,可以弹出包含详细信息的窗口。这些信息可以是HTML...

    gmaps_api_net

    除此之外,此API还支持图层管理,比如KML图层和自定义图层,这使得开发者可以加载KML或GeoJSON数据到地图上,或者创建自己的数据层来展示特定信息。对于实时数据的展示,例如交通流量、天气情况等,可以结合Google ...

    Google_Maps_API_V3

    - **MapOptions**:这是创建地图实例时可选的配置参数,包括但不限于中心位置、缩放级别、地图类型等,允许开发者对地图进行高度定制。 - **MapTypeId**:定义地图显示的类型,如卫星图像、地形图或街道地图等。 - *...

    leaflet-challenge:传单映射挑战Bootcampspot作业

    4. **Marker与Popup**:创建地图上的标记(Markers)来表示传单的位置,并可能需要添加弹出窗口(Popups)来展示传单的详细信息。 5. **GeoJSON格式**:如果传单数据是以GeoJSON格式提供的,需要了解如何读取和解析...

Global site tag (gtag.js) - Google Analytics