1

我在 iPad Landscape 中加载地图时遇到问题（在 Portrait 中一切正常）。

编辑：我发现一个问题与地图元素在方向元素之后“下推”这一事实有关，因为当我降低高度时空间不足。我试图让元素流动，但它仍然被推下。

景观（问题）： 在此处输入图像描述

当我将 iPad 旋转到纵向（确定）时：

在此处输入图像描述

编码：

脚本：

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);
    }
});

看法：

<!-- Partner's directions -->
<div id="dtl-directions-ctn" class="directions-ctn">
    <div class="header-ctn">
        <div class="title">Direções para: </div>
        <div id="dtl-directions-partner-name" class="name lp-clr-orange"></div>
        <div id="dtl-directions-close-btn" class="close-ctn lp-clr-orange">X</div>
    </div>
    <div id="dtl-directions-panel" class="directions-panel"></div>
    <div id="dtl-directions-map-canvas" class="dtl-map-ctn"></div>
</div>

CSS：

.directions-ctn {
    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 {
    height: 95%;
    float: right;
    width: 50%;
    overflow: auto;
}

.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: 95%;
}

.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 */
}

这个问题只发生在 iPad 上。

我在 Chrome 中尝试过，问题是一样的，所以它与 Safari 无关。

在我的电脑上一切正常。

4

0 回答 0