MapMyIndia 未完全加載，但當我打開開發人員工具（按 f12）時，它正在工作

Question

我正在我的項目中集成 MapMyIndia ( https://www.mapmyindia.com/api/ )。 我在引導模式中展示了這個 map。 當我打開模態時，map 未完全加載，但如果我打開開發人員工具（控制台 - 按 F12），它正在工作。

幫我解決這個問題

前

檢查元素后

關閉模態並再次打開后，它工作正常。

我的代碼如下

var start_end_markersList = new Array();
var advicemarkersList = [];
var via_points = "";
var map;
var full_path = window.location.origin;
var mapViaPoints = "";

    if (map == undefined || map == null)
                        map = new MapmyIndia.Map('map-container',
                            {
                                zoomControl: true,
                                hybrid: true,
                                traffic: true
                            });

                    get_route_result();

                    function get_route_result() {
                        remove_start_end_markersList();
                        remove_advice_marker();

                        var via_arr = '';
                        var start_points = latitude; //document.getElementById('start').value;/***get start points**/
                        var destination_points = longtitude; //document.getElementById('destination').value;/**get destination points**/
                        via_points = mapViaPoints; //document.getElementById('via').value;/**get via points**/

                        if (via_points) {
                            var v = via_points.split('|');
                            for (var i = 0; i < v.length; i++) {
                                var v_ar = v[i].split(',');
                                via_arr += ";" + v_ar[1] + "," + v_ar[0];
                            }

                        }
                        var advices_o = true;  //document.getElementById('advices_o').value;/**get advices option**/
                        var alternatives_o = true; //document.getElementById('alternatives_o').value;/**get alternatives option**/
                        var avoids = ''; //$('#avoids').val();

                        var eta = ""; try { eta = document.getElementById('eta').value; } catch (e) { }
                        var rtype = 0; // document.getElementById('rtype').value;
                        var rtype_payload = "&rtype=" + rtype;
                        var start_points_array = start_points.split(",");
                        var destination_points_array = destination_points.split(",");

                        var api_name = "route_adv";  //$("#api_name").val();
                        var api_call = api_name + "/driving/";

                        var rgn = 'ind';
                        rtype_payload = "";

                        var route_api_url_with_param = route_api_url + api_call + start_points_array[1] + "," + start_points_array[0] + via_arr + ";" + destination_points_array[1] + "," + destination_points_array[0] + "?alternatives=" + alternatives_o + rtype_payload + "&geometries=polyline&overview=" + (eta == 1 ? "simplified" : "full") + "&exclude=" + avoids + "&steps=" + advices_o + "&region=" + rgn;

                        show_markers("start", start_points_array);/*********show start points marker********/
                        show_markers("destination", destination_points_array); /*********show destination points marker********/

                        mapmyindia_fit_markers_into_bound(start_points_array, destination_points_array);

                        var encode = btoa(route_api_url_with_param);
                        getUrlResult(encode);
                    }

Answer 1

使用 map.invalidateSize(); 打開引導模式后

Answer 2

這段代碼對我有用。

setTimeout(function () {
        map.invalidateSize();
     }, 400);