谷歌地圖API，行車路線渲染

我正在嘗試撥打穀歌地圖API來顯示基於2個輸入位置的行車路線。我的技術水平是新鮮的。我使用xampp來託管本地服務器，然後在本地打開我的html（通過將它放置到htdocs文件中），我使用了一個記事本來呈現我的html（通過按Ctrl + Shift + Alt + R）。在使用這兩種渲染方法的同時，每次輸入我的地址時，地圖都會閃爍，並且不會顯示任何結果。問題是我的代碼還是我渲染它的方式？如果它是我呈現它的方式，有人可以建議另一種方式，我可以看到/呈現我的HTML？非常感謝你。馬丁谷歌地圖API，行車路線渲染

代碼：

<!DOCTYPE html> 
<html> 
<head profile="http://gmpg.org/xfn/11"><style type="text/css">.gm-style .gm-style-mtc  
label,.gm-style .gm-style-mtc div{font-weight:400}</style> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map-canvas { height: 100% ;position:relative;z-index:1} 


#panel { 
position: fixed; 
bottom: 35px; 
background: rgba(99,99,99,0.7); 
width: 97.75%; 
border:3px solid; #FF3D03 
border-radius:3px; 
z-index: 15; 
font-weight: bold; 
font-family: arial; 
font-style: normal; 
padding: 2px 0px 2px 24px; 
} 



</style> 
<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js? 
key=AIzaSyAzbS2nerrvbdvNlsyQO9cDWFNthdoswRU&sensor=false"> 
</script> 



<div id="map_canvas"> 


<script type="text/javascript"> 


var address = new google.maps.LatLng(31.208647, 7.861769); 
var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 


<!-------------------------------------------------------> 
    function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var mapOptions = { 
     center: address, 
     zoom: 16, 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
    }; 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
    directionsDisplay.setMap(map); 
    } 
<!------------------------------------------------------->   
    function calcRoute() { 
     var start = document.forms["frame1"]["address0"].value; 
     var end = document.forms["frame1"]["address1"].value; 
     var request = { 
      origin:start, 
      destination:end, 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
     }; 
     directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     } 
     }); 
    } 

<!------------------------------------------------------->   
// var myTitle = document.createElement('h1'); 
// myTitle.style.color = 'red'; 
// myTitle.innerHTML = 'menu would go here'; 
// var myTextDiv = document.createElement('div'); 
// myTextDiv.appendChild(myTitle); 

// map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(myTextDiv); 

// var marker = new google.maps.Marker({ 
//  position: new google.maps.LatLng(33.6803003, -116.173894), 
//  title: "Festival" }); 

//  marker.setMap(map);} 
<!------------------------------------------------------->  

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



</script> 

</div> 

</head> 
    <!--------------------------------------------------------------------------------> 
<body> 
<!-------------------------------------------------------> 
<!--------------------------------------------------------> 

<div id="panel" style="color:#ffffff; font-size:18px;" > 

<form name="frame1" onsubmit="calcRoute();"> 
<b>Start: </b> 
    <input type="text" name="address0"> 
<b>First Address: </b> 
    <input type="text" name="address1"> 
    <input type="submit" style="visibility: hidden;"> 
</form> 

</div> 


    <div id="map-canvas"/> 
<!------------------------------------------------------->  
<!-------------------------------------------------------> 

    </body> 
    </html>

來源

2013-08-28 eMTy

您的表單提交重新加載頁面，摧毀了方向響應。變化：

<form name="frame1" onsubmit="calcRoute();">

要：

<form name="frame1" onsubmit="calcRoute();return false;">

來源

2013-08-28 19:12:55 geocodezip

非常感謝你，這正是它！這是始終如此（頁面重新加載）與表單提交？因此，每次我在div中使用表單時，我都需要「返回false」才能使用它。 – eMTy

是的。除非您希望發送到您的服務器和服務器的信息根據提交的信息修改頁面。 – geocodezip

啊，我明白了，謝謝。 – eMTy

谷歌地圖API，行車路線渲染

回答

相關問題