谷歌地图API，驾驶方向渲染

Google Maps API, driving directions rendering

本文关键字：方向 驾驶 API 谷歌地图      更新时间：2023-09-26

我正在尝试调用谷歌地图api，以显示基于2个输入位置的驾驶方向。我的技术水平是新手。

我正在使用记事本来渲染我的html（通过按ctrl+shift+alt+R），我还尝试使用xampp托管本地服务器，然后在本地打开我的html（通过将其放入htdocs文件）。在使用这两种渲染方法时，每次我输入地址时，地图都会闪烁，不会显示任何结果。这个问题是我的代码还是我呈现它的方式？如果这是我渲染它的方式，有人能建议我用另一种方式查看/渲染我的html吗？非常感谢。Martin

代码：

<!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>

您提交的表单正在重新加载页面，破坏directions响应。更改：

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

收件人：

<form name="frame1" onsubmit="calcRoute();return false;">
相关文章：