jQuery 不显示谷歌地图

Question

我将尽可能详细地描述我的问题。如果您转到 http://91.123.196.34/Dentalo.Portal/ 并单击位于瑞典的一个位置图标。你会得到这张图片

如果您单击“信息”按钮，然后单击选项卡菜单“Vägbeskrivning”，您将获得此图像。

Goole map 正在按照我的意愿进行渲染。但是，如果您关闭弹出窗口并再次单击相同的信息按钮，那么 Google map 就会按照我希望的方式呈现。

这让我很头疼，因为我不知道如何解决这个问题。

这是我的 html 代码。

<div id="content_v4" class="tabscontent">

<!-- Start Google Map -->
<div id="map_canvas"></div>

<div class="one-page column bottom-3" id="textdirections">

    <div class="info-box top-3" id="direction-steps">
    </div>        
</div>

<div id="directions-panel"></div>
<!-- End -->

</div>  

和 jquery 代码

function showPopUp(id) {
//            window.jQuery("#tab_v4").click();
//            window.jQuery("#tab_v1").click();
//            window.jQuery("#tab_v4").click();
            window.jQuery( "#priceName" ).empty();
            window.jQuery( "#companyPrice" ).empty();
            window.jQuery( "#referencePrice" ).empty();
            window.jQuery( "#directions-panel" ).empty();
            window.jQuery("#dialog").dialog();
            window.jQuery(".ui-dialog").css("width", "+=350");
            //begin rest call
            var window.jQuerycompanyPrice = window.jQuery("#companyPrice");
            var window.jQueryreferencePrice = window.jQuery("#referencePrice");
            var window.jQuerypriceName = window.jQuery("#priceName");
            window.jQuery( "#content_v1" ).empty();
            var window.jQuerycontent_v1 = window.jQuery("#content_v1");
            //window.jQuery("#map_canvas").css("width", "500");
            //window.jQuery( "#tab_v1" ).addClass("active");
            window.jQuery.ajax({
                type: "GET",
                cache: false,
                async: false,
                url: "http://localhost/Dentalo.Rest.Service/Dentalo.svc/GetPrices/Company/" + id,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    window.jQuery.each(data, function (index, item) {
                        window.jQuerypriceName.append("<li>" + item.PriceType.Name + "</li>");
                        window.jQuerycompanyPrice.append("<li>" + item.RegularPrice + " kr</li>");
                        window.jQueryreferencePrice.append("<li>" + item.PriceType.ReferencePrice + " kr</li>");
                    });
                },
                error: function (msg, url, line) {
                    //alert('error trapped in error: function(msg, url, line)');
                    alert('msg = ' + msg + ', url = ' + url + ', line = ' + line);
                }
            });
            window.jQuery.ajax({
                type: "GET",
                cache: false,
                async: false,
                url: "http://localhost/Dentalo.Rest.Service/Dentalo.svc/Company/" + id,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    calculateRoute(window.jQuery("#latitude").val() + "," + window.jQuery("#longitude").val(), data.Address + ", " + data.State.County.Name);
                    window.jQuerycontent_v1.append("<h4>" + data.Name + "</h4>" +
                                       "<h4>Öppettider</h4><br />" +
                                       "<i class='icon-time s-20 color'></i> <br />" + data.OpeningHours.replace(/\r\n|\n|\r/g, '<br />') +
                                       "<br /><br /><h4>Hemsida</h4> <a href='" + data.Url + "'>" + data.Url + "</a><br />");
                    window.jQuery.each(data, function (index, item) {
                        window.jQuerypriceName.append("<li>" + item.PriceType.Name + "</li>");
                        window.jQuerycompanyPrice.append("<li>" + item.RegularPrice + " kr</li>");
                        window.jQueryreferencePrice.append("<li>" + item.PriceType.ReferencePrice + " kr</li>");
                    });
                },
                error: function (msg, url, line) {
                    //alert('error trapped in error: function(msg, url, line)');
                    alert('msg = ' + msg + ', url = ' + url + ', line = ' + line);
                }
            });
        }
        function calculateRoute(from, to) {
            // Center initialized to Naples, Italy
//            var myOptions = {
//                zoom: 10,
//                center: new google.maps.LatLng(40.84, 14.25),
//                mapTypeId: google.maps.MapTypeId.ROADMAP
//            };
            // Draw the map
            var mapObject = new google.maps.Map(document.getElementById("map_canvas"));
            var directionsService = new google.maps.DirectionsService();
            var directionsRequest = {
                origin: from,
                destination: to,
                travelMode: google.maps.DirectionsTravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC
            };
//              directionsDisplay = new google.maps.DirectionsRenderer();
//              directionsDisplay.setMap(map);
//              directionsDisplay.setPanel(document.getElementById('directions-panel'));

            directionsService.route(
                directionsRequest,
                function (response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {

                        // Start/Finish icons
                        var icons = {
                            start: new google.maps.MarkerImage(
                            // URL
                            'http://a01c00487.ad.sogeti.se/dentalo.portal/assets/images/img/ui/imagefiles-location_map_pin_home_green.png',
                            // (width,height)
                            new google.maps.Size(64, 64),
                            // The origin point (x,y)
                            new google.maps.Point(0, 0),
                            // The anchor point (x,y)
                            new google.maps.Point(22, 32)
                            ),
                            end: new google.maps.MarkerImage(
                            // URL
                            'http://a01c00487.ad.sogeti.se/dentalo.portal/assets/images/img/ui/marker_location_blue.png',
                            // (width,height)
                            new google.maps.Size(46, 50),
                            // The origin point (x,y)
                            new google.maps.Point(0, 0),
                            // The anchor point (x,y)
                            new google.maps.Point(21, 53)
                            )
                        };

                        var directionsDisplay = new google.maps.DirectionsRenderer({
                            map: mapObject,
                            directions: response,
                            suppressMarkers: true
                        });
                        var leg = response.routes[0].legs[0];
                      directionsDisplay.setMap(mapObject);
                        var d = response.routes[0].legs[0];
                        if (d != null) {
                            var h = "";
                            for (var c = 0, g; g = d.steps[c]; ++c) {
                                var b = "";
                                if (g.transit != null) {
                                    b = ", <strong>avstigning:</strong> " + g.transit.arrival_stop.name;
                                }
                                h += "<div class='twelve columns bottom-1 float-left'>" + g.instructions + b + "</div><div class='four columns bottom-1 float-right'><strong>" + g.distance.text + ", " + g.duration.text + "</strong></div>";
                            }
                            //alert(h);
                            window.jQuery("#direction-steps").html(h);
                            window.jQuery("#textdirections").show();
                        }
                      directionsDisplay.suppressMarkers = true;
                      //directionsDisplay.setPanel(document.getElementById('directions-panel'));
                        makeMarker(leg.start_location, mapObject, icons.start, "title");
                        makeMarker(leg.end_location, mapObject, icons.end, 'title');
                    } 
                    else
                    {
                        window.jQuery("#error").append("Unable to retrieve your route<br />");
                    }
                }
            );
        }
        function makeMarker(position, map, icon, title) {
            new google.maps.Marker({
                position: position,
                map: map,
                icon: icon,
                title: title
            });
        }

希望你明白。我知道这是一个困惑的描述。如果它是一个不好的描述删除。我已经尽力了。

Answer 1

您的问题是启动时 map 以某种方式残缺不全？这在隐藏元素上的谷歌地图中很常见。您必须通过调用强制重绘它

google.maps.event.trigger(mapObject, 'resize');

看起来您正在使用一种叫做“tytabs”的东西，它似乎没有显示/隐藏选项卡的事件。

因此，我建议您将此事件添加到 function calculateRoute，假设 tab_v4 是 google map 选项卡 (Vägbeskrivning) 的 id:

$("#tab_v4").click(function() {
   google.maps.event.trigger(mapObject, 'resize');
});