0

方向パネルを自分のウェブサイトに表示するのに本当に苦労しています。地図は地理位置情報を使用して機能し、ルートが表示されますが、ルート案内パネルを下に表示できません。これが私が仕事をしようとしているコードです:

<style type="text/css">
  #map {
    width: 100%;
    height: 400px;
    margin-top: 10px;
  }

#directionsPanel {
    float: none;
    width: 100%;
    height: 400px;
    overflow: auto;
  }</style>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
  var directionDisplay, map;
  function calculateRoute(from, to) {
    // Center initialized to Lafayette IN
    var travelMode = $('input[name="travelMode"]:checked').val();
    var myOptions = {
      zoom: 10,
      center: new google.maps.LatLng(40.40541,-86.89048),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    var panel = document.getElementById("directionsPanel");
    // Draw the map
    var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);

    var directionsService = new google.maps.DirectionsService();
    var directionsRequest = {
      origin: from,
      destination: to,
      travelMode: google.maps.DirectionsTravelMode[travelMode],
      unitSystem: google.maps.UnitSystem.IMPERIAL
    };
    directionsService.route(
      directionsRequest,
      function(response, status)
      {
        if (status == google.maps.DirectionsStatus.OK)
        {
          new google.maps.DirectionsRenderer({
            map: mapObject,
            directions: response
          });
        }
        if (panel != null) {
directionsDisplay.setPanel(panel);
}
        else
          $("#error").append("Unable to retrieve your route<br />");
      }
    );
  }

  $(document).ready(function() {
    // If the browser supports the Geolocation API
    if (typeof navigator.geolocation == "undefined") {
      $("#error").text("Your browser doesn't support the Geolocation API");
      return;
    }

    $("#from-link, #to-link").click(function(event) {
      event.preventDefault();
      var addressId = this.id.substring(0, this.id.indexOf("-"));

      navigator.geolocation.getCurrentPosition(function(position) {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({
          "location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
        },
        function(results, status) {
          if (status == google.maps.GeocoderStatus.OK)
            $("#" + addressId).val(results[0].formatted_address);
          else
            $("#error").append("Unable to retrieve your address<br />");
        });
      },
      function(positionError){
        $("#error").append("Error: " + positionError.message + "<br />");
      },
      {
        enableHighAccuracy: true,
        timeout: 10 * 1000 // 10 seconds
      });
    });

    $("#calculate-route").submit(function(event) {
      event.preventDefault();
      calculateRoute($("#from").val(), $("#to").val());
    });
  });
  google.maps.event.addDomListener(window, 'load', initialize);

</script>

ここに私のHTMLコードがあります:

<body>
<body onLoad="calculateRoute()">
<!-- Start Header -->
<?php include("header.php"); ?> 
<!-- End Header -->

<div style="margin: 0pt auto; max-width: 600px;">

<div id="wrapper">

<!-- Start Nav Button -->
<div class="topnav">
<p><a href="./">Home&nbsp; |&nbsp; Find Us</a></p>
</div>  
<!-- End Nav Button -->

<!-- Start Content -->
<div id="contentinner">
<div class="content">
<p><span><?php echo $businessname; ?></span><br /><?php echo $address1; ?><br /><?php     echo $address2; ?></p>
<section id="wrapper">
<form id="calculate-route" name="calculate-route" action="#" method="get">
  <label for="from">From:</label><br />
  <input type="text" id="from" name="from" required="required" placeholder="An     address" size="20" />
  <input type="button" id="from-link" href="#" value=Get-My-Location />
  <br />

  <label for="to">To: <?php echo $businessname;?></label><br />
  <input type="text" id="to" name="to" value="<?php echo $address1; ?> <?php echo $address2; ?>" size="20" />
  <!--<a id="to-link" href="#">Get my position</a> -->
  <br />
 <label><input type="radio" name="travelMode" value="DRIVING" checked />     Driving</label><br />
<label><input type="radio" name="travelMode" value="BICYCLING" /> Bicylcing</label><br />
<label><input type="radio" name="travelMode" value="TRANSIT" /> Public  transport</label><br />
<label><input type="radio" name="travelMode" value="WALKING" /> Walking</label><br />
  <input type="submit" />
  <input type="reset" />
</form>
<div id="map"></div>
<div id="directionsPanel"></div>
<p id="error"></p>
</section>  
<!-- End Content -->

</div><!-- wrapper -->

</div>
</div>


</div><!-- margin -->

<!-- Start Footer -->
<?php include("footer.php"); ?>                 
<!-- End Footer -->

</body>

4

1 に答える 1

0

setPanel メソッドを持つオブジェクトはDirectionsRendererです

それへの参照を保持する必要があります。

     directionsDisplay =  new google.maps.DirectionsRenderer({
                                map: mapObject,
                                directions: response
                              });

次に、その上で setPanel を呼び出します。

    directionsDisplay.setPanel(panel);

グローバル スコープで宣言するコードの先頭にタイプミスがあることに注意してください。

 <script>
 var directionDisplay, map;

(「s」付き):

 <script>
 var directionsDisplay, map;
于 2013-10-22T01:31:56.907 に答える