Google지도 API 운전 방향 렌더링

Google지도 API를 호출하여 입력 된 2 곳의 위치에 따라 운전 경로를 표시하려고합니다. 내 스킬 레벨은 newb입니다.Google지도 API 운전 방향 렌더링

메모장을 사용하여 Ctrl + Shift + Alt + R을 눌러 HTML을 렌더링하고 xampp을 사용하여 로컬 서버를 호스트 한 다음 htdocs 파일에 배치하여 로컬 HTML을 엽니 다. . 이러한 렌더링 방법을 모두 사용하는 동안 주소를 입력 할 때마다지도가 깜박이고 아무 결과도 표시되지 않습니다. 문제는 내 코드 또는 렌더링 방법입니까? 그 방식으로 렌더링하는 방법이라면 다른 사람이 제 HTML을보고/렌더링 할 수있는 다른 방법을 제안 할 수 있습니까? 고맙습니다. 마틴

코드 :

이

<!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에 양식을 사용할 때마다 "return false"가 필요합니다. – eMTy

예. 서버 및 서버로 전송 된 정보가 제출 된 정보를 기반으로 페이지를 수정하기를 원하지 않는 한. – geocodezip

아, 고맙습니다. – eMTy

Google지도 API 운전 방향 렌더링

답변

관련 문제