javascript - Google 路线在 Internet Explorer 9 和 10 中不显示 map

Question

我在 Internet Explorer 9 和 10(版本 11 工作正常)中显示 Google 的方向 map 时遇到了一个大问题。

HTML 是:

<div id="dtl-directions-ctn" class="directions-ctn">
    <table style="width: 100%; height: 100%;">
        <tr class="header-ctn">
            <td>
                <table style="width: 100%;">
                    <tr>
                        <td class="title">Direções para: </td>
                        <td id="dtl-directions-partner-name" class="name lp-clr-orange"></td>
                        <td id="dtl-directions-close-btn" class="close-ctn lp-clr-orange">X</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table style="width: 100%; height: 100%;">
                    <tr style="height: 100%">
                        <td id="dtl-directions-map-canvas" class="dtl-map-ctn"></td>
                        <td id="dtl-directions-panel" class="directions-panel"></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

JS:

var _locationLatitude = $("#sch-location-latitude-fld").val();
var _locationLongitude = $("#sch-location-longitude-fld").val();
var _partnerLatitude = $("#dtl-partner-latitude-fld").val();
var _partnerLongitude = $("#dtl-partner-longitude-fld").val();

var _directionsService = new google.maps.DirectionsService();
var _directionsDisplay = new google.maps.DirectionsRenderer();

var _map = new google.maps.Map(document.getElementById('dtl-directions-map-canvas'));

_directionsDisplay.setMap(_map);
_directionsDisplay.setPanel(document.getElementById('dtl-directions-panel'));

var start = new google.maps.LatLng(_locationLatitude, _locationLongitude);
var end = new google.maps.LatLng(_partnerLatitude, _partnerLongitude); 

var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING,
    provideRouteAlternatives: true
};

_directionsService.route(request, function (response, status) {

    if (status == google.maps.DirectionsStatus.OK) {
        _directionsDisplay.setDirections(response);
    }
});
};

CSS:

/* Directions */
.directions-ctn {
    display: none;
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 3;
    /*overflow: hidden;*/
    max-width: 1024px;
    max-height: 768px;
    box-shadow: 0 0 17px rgba(96,96,96,0.3);
}

.directions-ctn .header-ctn {
    height: 5%;
}

.directions-ctn .header-ctn .title {
    float: left;
    padding: 10px;
}

.directions-ctn .header-ctn .name {
    float: left;
    padding-top: 10px;
}

.directions-ctn .header-ctn .close-ctn {
    width: 6%;
    float: right;
    text-align: center;
    font-weight: bold;
    font-size: 1.3em;
    padding: 10px;
    cursor: pointer;
}

.directions-ctn .directions-panel {
    width: 50%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    overflow-y: auto;
    padding-left: 7px;
}

.directions-ctn .directions-panel .adp-placemark {
    margin: 0;
}

.directions-ctn .directions-panel .adp-placemark td {
    padding: 4px;
    vertical-align: middle;
}

.directions-ctn .directions-panel .adp-summary {
    padding: 5px 3px 5px 5px;
}

.directions-ctn .directions-panel .adp-legal {
    padding: 5px 0 5px 5px;
}

.directions-ctn .dtl-map-ctn {
    width: 50%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin-right: -4px;
}

.directions-ctn .directions-panel img, .directions-ctn .dtl-map-ctn img {
    max-width: none; /* we need to overide the img { max-width: 100%; } to display the controls correctly */
}

我试图在 map 容器的所有父级中插入 Height: 100% 但它不起作用。

您可以在 http://lp-qa.izigo.pt 查看实时工作示例在第一个下拉列表中选择“Onde？”中的“Pneus” (意思是哪里？)输入“Lisboa”并选择第一个选项，搜索后单击标记并选择“Obter Direções”(获取路线)。

左边的 map 在IE9和IE10中不会显示。

---

这是发生了什么:

我已将高度从 100% 更改为固定高度:

.directions-ctn .dtl-map-ctn {
    width: 50%;
    /*height: 100%;*/
    height: 748px;
    display: inline-block;
    vertical-align: top;
    margin-right: -4px;
}

Answer 1

不要使用 td 作为 map 容器。而是在 td 中放置一个 div 并设置固定高度。

HTML 更改:

<td class="dtl-map-ctn"><div id="dtl-directions-map-canvas"></div></td>

CSS 更改:

#dtl-directions-map-canvas {
    height: 470px;
}

一个工作示例 http://jsfiddle.net/e86d5q35/5/