在bootstrap modal 中加載百度地圖的資訊視窗失效解決方法

這個問題其實很傻，解決方法沒有任何技術含量，隻是記錄下工作中發生的事。

前陣子給一個汽車集團客戶做了一個經銷商查詢系統，其中一個功能是使用地圖示注經銷商店面位址，并且實作導航功能。

頁面示範位址：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" οnclick="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);
        
    }
           

　　

轉載于:https://www.cnblogs.com/webdu/p/7824731.html