Question

我正在尝试拨打谷歌地图api来显示基于2个输入位置的行车路线。我的技能水平是新的。

我正在使用记事本来渲染我的html（通过按ctrl + shift + alt + R），我也尝试使用xampp来托管本地服务器，然后在本地打开我的html（通过将其放入htdocs文件中）。在使用这两种渲染方法时，每次输入地址时，地图都会闪烁，并且不会显示任何结果。问题是我的代码还是我呈现它的方式？如果它是我呈现它的方式，有人可以建议另一种方式，我可以看到/渲染我的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>

Answer 1

您的表单提交正在重新加载页面，破坏了路线响应。变化：

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

要：

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

Google Maps API，推动路线渲染

1 个答案: