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

您有范围问题：

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

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);

working example

表单上的Google地图指示提交无效

1 个答案: