码迷,mamicode.com
首页 > 其他好文 > 详细

在bootstrap modal 中加载百度地图的信息窗口失效解决方法

时间:2017-11-13 11:32:06      阅读:407      评论:0      收藏:0      [点我收藏+]

标签:origin   default   logs   nbsp   完成   highlight   goto   dal   poi   

这个问题其实很傻,解决方法没有任何技术含量,只是记录下工作中发生的事。

前阵子给一个汽车集团客户做了一个经销商查询系统,其中一个功能是使用地图标注经销商店面地址,并且实现导航功能。

页面演示地址:http://www.lyytqm.com/Dealerships

点击地址区域在模态窗口中显示百度地图,并在地图中标注点位,显示窗口信息,但信息窗口展示的信息频繁失效,仅显示名称。

更换了各种加载数据方式不能解决,在蹲厕所时想到了原因,即可给出解决方法。

原因是bootstrap modal 以及动画 没过完全渲染完成的情况下,信息就加载完成,这种待模态窗口完全渲染后,窗口信息就不会正常显示。

解决方法是使用shown.bs.modal事件,待完全演染完成窗口后,打插入标注点,以及窗口信息。

代码如下:

$(‘#map-location-modal‘).on(‘shown.bs.modal‘, function (e) {
                _ShowMap(data.lng, data.lat, data.title, data.address, data.telphone, ‘18‘);
            })


function _ShowMap(lng, lat, name, addrsee, phone, zoom) {
        

        var message = ‘<p style="color: #bf0008;">‘ + name + ‘</p><p>地址:‘ + addrsee + ‘</p><p>电话:‘ + phone + ‘</p>‘
            + ‘<form action="http://api.map.baidu.com/direction" method="get" id="gotoBaiduForm">‘
            + ‘  <input type="hidden" value="易通集团网站" name="src" />‘
            + ‘  <input type="hidden" value="" name="region" />‘
            + ‘  <input type="hidden" value="html" name="output" />‘
            + ‘  <input type="hidden" value="driving" name="mode" />‘
            + ‘  <input type="hidden" value="" name="origin" />‘
            + ‘  <input type="hidden" value="latlng:‘ + lat + ‘,‘ + lng + ‘|name:‘ + name + ‘" name="destination" />‘
            + ‘  <button type="button" onclick="gotobaidu()" id="NavigationButton" class="btn btn-default">导航</button>‘
            + ‘</form>‘;
        var map = new BMap.Map("map-container");
        var marker = new BMap.Marker(new BMap.Point(lng, lat));
        var infoWindow = new BMap.InfoWindow(message);

        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.centerAndZoom(new BMap.Point(lng, lat), zoom);
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
        map.addOverlay(marker);

        marker.addEventListener("click", function () {
            this.openInfoWindow(infoWindow);
        });
        marker.openInfoWindow(infoWindow);
        
    }

  

 

在bootstrap modal 中加载百度地图的信息窗口失效解决方法

标签:origin   default   logs   nbsp   完成   highlight   goto   dal   poi   

原文地址:http://www.cnblogs.com/webdu/p/7824731.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!