谷歌地圖用setPanel（）問題顯示文本方向

我嘗試谷歌地圖用setPanel（）顯示文本方向。 Google的例子適用於IE9，但我的測試頁在IE9上有問題，儘管我複製了相同的代碼。方向面板中的方向箭頭不會隨文本一起滾動，而是保持固定。 Chrome沒有問題。爲什麼？謝謝。代碼如下：谷歌地圖用setPanel（）問題顯示文本方向

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<title>Displaying text directions with <code>setPanel()</code></title> 
<style> 
    html, body, #map-canvas { 
    height: 100%; 
    margin: 0px; 
    padding: 0px 
    } 
    #panel { 
    position: absolute; 
    top: 5px; 
    left: 50%; 
    margin-left: -180px; 
    z-index: 5; 
    background-color: #fff; 
    padding: 5px; 
    border: 1px solid #999; 
    } 
</style> 
<style> 
    #directions-panel { 
    height: 100%; 
    float: right; 
    width: 390px; 
    overflow: auto; 
    } 

    #map-canvas { 
    margin-right: 400px; 
    } 

    #control { 
    background: #fff; 
    padding: 5px; 
    font-size: 14px; 
    font-family: Arial; 
    border: 1px solid #ccc; 
    box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4); 
    display: none; 
    } 

    @media print { 
    #map-canvas { 
     height: 500px; 
     margin: 0; 
    } 

    #directions-panel { 
     float: none; 
     width: auto; 
    } 
    } 
</style> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script> 
var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 

function initialize() { 
directionsDisplay = new google.maps.DirectionsRenderer(); 
var mapOptions = { 
zoom: 7, 
mapTypeId: google.maps.MapTypeId.ROADMAP, 
center: new google.maps.LatLng(41.850033, -87.6500523) 
}; 
var map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 
    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById('directions-panel')); 



    var control = document.getElementById('control'); 
     control.style.display = 'block'; 
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(control); 
} 

function calcRoute() { 
    var start = document.getElementById('start').value; 
    var end = document.getElementById('end').value; 
    var request = { 
    origin: start, 
    destination: end, 
    travelMode: google.maps.TravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
    } 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 

<body> 
    <div id="control"> 
     <strong>Start:</strong> 
     <select id="start" onchange="calcRoute();"> 
     <option value="chicago, il">Chicago</option> 
     <option value="st louis, mo">St Louis</option> 
     <option value="joplin, mo">Joplin, MO</option> 
     <option value="oklahoma city, ok">Oklahoma City</option> 
     <option value="amarillo, tx">Amarillo</option> 
     <option value="gallup, nm">Gallup, NM</option> 
     <option value="flagstaff, az">Flagstaff, AZ</option> 
     <option value="winona, az">Winona</option> 
     <option value="kingman, az">Kingman</option> 
     <option value="barstow, ca">Barstow</option> 
     <option value="san bernardino, ca">San Bernardino</option> 
     <option value="los angeles, ca">Los Angeles</option> 
     </select> 
     <strong>End:</strong> 
     <select id="end" onchange="calcRoute();"> 
     <option value="chicago, il">Chicago</option> 
     <option value="st louis, mo">St Louis</option> 
     <option value="joplin, mo">Joplin, MO</option> 
     <option value="oklahoma city, ok">Oklahoma City</option> 
     <option value="amarillo, tx">Amarillo</option> 
     <option value="gallup, nm">Gallup, NM</option> 
     <option value="flagstaff, az">Flagstaff, AZ</option> 
     <option value="winona, az">Winona</option> 
     <option value="kingman, az">Kingman</option> 
     <option value="barstow, ca">Barstow</option> 
     <option value="san bernardino, ca">San Bernardino</option> 
     <option value="los angeles, ca">Los Angeles</option> 
     </select> 
    </div> 
    <div id="directions-panel"></div> 
    <div id="map-canvas"></div> 
    </body> 
</html>

來源

2013-10-24 user1729894

請在您的問題（不只是鏈接）中發佈您的代碼（至少適用的部分）。 – geocodezip

我無法訪問的IE版本在您的測試鏈接中存在問題（至少我沒有看到我理解爲報告的問題）。 – geocodezip

我選擇城市後，我會看到雙滾動條。一個用於頁面，一個用於側邊欄。當我滾動頁面時，側欄上的小方向圖標被固定，並在頁面的末尾繼續顯示。它一次顯示所有圖標，即使是在滾動後必須顯示的圖標。 – user1729894

我有同樣的問題。我終於能夠通過覆蓋箭頭圖標的CSS樣式並且它是容器來解決它。下面的樣式defintions添加到您的網頁，谷歌的API腳本加載後：

/* Override Google Maps Icon style */ 
    .adp-substep .adp-stepicon .adp-maneuver { 
     position: static; 
    } 

    /* Override Google Maps Icon Container style */ 
    .adp-substep .adp-stepicon{ 
     position: static; 
    }

這將覆蓋位置：絕對，谷歌API對這些類自動使用。仍然不確定爲什麼絕對有時像固定的行爲，但這種覆蓋爲我工作。

來源

2014-01-14 21:01:42

谷歌地圖用setPanel（）問題顯示文本方向

回答

相關問題