google-maps - 表单提交上的谷歌地图方向不起作用

Question

我的地图在页面加载时有一个定义的方向。我有一个表格可以更改提交的方向。我似乎无法用我的代码完成这项工作。任何想法或帮助将不胜感激。

这是我的api代码。

 <script type="text/javascript">
//
    var dService = new google.maps.DirectionsService();
    var departurePoint = new google.maps.LatLng( , );
    var destinationPoint = new google.maps.LatLng( , );
function initialize() {
    dDisplay = new google.maps.DirectionsRenderer();
    var map = new google.maps.Map(document.getElementById("map"), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true
    });
     dDisplay.setPanel(document.getElementById("directionsHolder"));
      dDisplay.setMap(map);
      dService.route({
        origin: departurePoint,
        destination: destinationPoint,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          dDisplay.setDirections(result);
        }
      });
function setDirections(destinationPoint, dirLang) {
            dDisplay.setPanel(document.getElementById("directionsHolder"));
            dDisplay.setMap(map);
    dService.route({
    origin: departurePoint,
    destination: destinationPoint,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  }, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      dDisplay.setDirections(result);
    }
    });
}
}
google.maps.event.addDomListener(window, 'load', initialize);

这是我的表格：

        <form id="getDirections" action="#" onsubmit="setDirections(this.destinationPoint.value, this.dirLang.value); return false">
    <fieldset>
        <label for="destinationPoint">Directions: </label>
        <select id="destinationPoint" name="destinationPoint">
            <option value="loc1">Location 1</option>
            <option value="loc2">Location 2</option>
            <option value="loc3">Location 3</option>
        </select>

        <label for="dirLang"></label>
        <select id="dirLang" name="dirLang">
            <option value="en" selected="selected" >English</option>
            <option value="fr">French</option>
            <option value="de">German</option>
            <option value="es">Spanish</option>
            <option value="ja">Japanese</option>
            <option value="nl">Dutch</option>
        </select>
        <input name="submit" type="submit" class="submit" value="View Directions" />
    </fieldset>
</form> 

Answer 1

您有范围问题：

1. setDirections 函数是初始化函数的本地函数

2. map 变量是初始化函数的局部变量

   <script type="text/javascript">
   //
   var map = null;
   var dService = new google.maps.DirectionsService();
   var departurePoint = "Newark, NJ";
   var destinationPoint = "New York, NY";
   function initialize() {
       dDisplay = new google.maps.DirectionsRenderer();
       map = new google.maps.Map(document.getElementById("map"), {
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         mapTypeControl: true
       });
    dDisplay.setPanel(document.getElementById("directionsHolder"));
    dDisplay.setMap(map);
    dService.route({
       origin: departurePoint,
       destination: destinationPoint,
       travelMode: google.maps.DirectionsTravelMode.DRIVING
     }, function(result, status) {
       if (status == google.maps.DirectionsStatus.OK) {
         dDisplay.setDirections(result);
       }
     });
   }
   function setDirections(destinationPoint, dirLang) {
           dDisplay.setPanel(document.getElementById("directionsHolder"));
           dDisplay.setMap(map);
   dService.route({
     origin: departurePoint,
     destination: destinationPoint,
     travelMode: google.maps.DirectionsTravelMode.DRIVING
     }, function(result, status) {
       if (status == google.maps.DirectionsStatus.OK) {
         dDisplay.setDirections(result);
       }
     });
   }
   google.maps.event.addDomListener(window, 'load', initialize);
   

工作示例