Question

所以我不仅对HTML很新，而且还使用API。我一直致力于实施Maps Javascript API，特别是Places Autocomplete和Directions功能。

在此之前，我只是简单地初始化地图并且每次都正确加载，但是我尝试（为了测试目的）实施更复杂的地方＆amp;方向功能它停止初始化。

我浏览了几个论坛，似乎无法找到解决此问题的方法。如果有人能指出代码中的潜在问题，我将不胜感激！

谢谢！

<!DOCTYPE html>
<html>
      <head>
         <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
         <meta charset="utf-8">
         <!-- GMAIL CLIENT KEY: 462218843122-16riskqb5201tfaeh51nrjqo3bec7h1c.apps.googleusercontent.com -->
                <!-- link to main stylesheet -->
            <link rel="stylesheet" type="text/css" href="main.css">
      </head>

      <body>
            <!-- Navigation Bar -->
            <div class="navbar">
               <a href="#home">Home</a>
               <a href="SignIn.html">Sign In</a>
               <a href="#register">Register</a>
            </div>


            <!--
            <div class="about">
               <a>About</a><br />
               <a>We use the Firebase API to create and manage user accounts.</a><br /><br />
               <a>The user selects two travel points as displayed with the Google Maps API.</a><br /><br />
               <a>We poll United/Uber/Amtrack APIs for the available travel options.</a><br /><br />
               <a>We then email the user when a trip is available</a>
            </div>
         -->

            <div class="destInt">
               <a>Enter your Trip</a>
            </div>

         <div id="forms" style="position:absolute; top:30; left:0; height:50%; width: 50%">
            <form>

              <div id="mode-selector" class="controls">
                  <input type="radio" name="type" id="changemode-walking" checked="checked">
                  <label for="changemode-walking">Walking</label>

                  <input type="radio" name="type" id="changemode-transit">
                  <label for="changemode-transit">Transit</label>

                  <input type="radio" name="type" id="changemode-driving">
                  <label for="changemode-driving">Driving</label>
               </div>


               <input id="origin-input" class="controls" type="text"
               placeholder="Enter an origin location"><br>

               <input id="destination-input" class="controls" type="text"
               placeholder="Enter a destination">



            </form>
         </div>





      <!-- Map -->
      <div id="map" style="position:absolute; top:35; right:0; height: 400px;  width: 48%; margin-right: 12px"></div>
      <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 30.615, lng: -96.342},
          zoom: 13
        });

        new AutocompleteDirectionsHandler(map);
      }

        /**
        * @constructor
       */
      function AutocompleteDirectionsHandler(map) {
        this.map = map;
        this.originPlaceId = null;
        this.destinationPlaceId = null;
        this.travelMode = 'WALKING';
        var originInput = document.getElementById('origin-input');
        var destinationInput = document.getElementById('destination-input');
        var modeSelector = document.getElementById('mode-selector');
        this.directionsService = new google.maps.DirectionsService;
        this.directionsDisplay = new google.maps.DirectionsRenderer;
        this.directionsDisplay.setMap(map);

        var originAutocomplete = new google.maps.places.Autocomplete(
            originInput, {placeIdOnly: true});
        var destinationAutocomplete = new google.maps.places.Autocomplete(
            destinationInput, {placeIdOnly: true});

        this.setupClickListener('changemode-walking', 'WALKING');
        this.setupClickListener('changemode-transit', 'TRANSIT');
        this.setupClickListener('changemode-driving', 'DRIVING');

        this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
        this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');

        this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput);
        this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationInput);
        this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(modeSelector);

        var geocoder = new google.maps.geocoder;
        var service = new google.maps.DistanceMatrixService;




        })
      }

      // Sets a listener on a radio button to change the filter type on Places
      // Autocomplete.
      AutocompleteDirectionsHandler.prototype.setupClickListener = function(id, mode) {
        var radioButton = document.getElementById(id);
        var me = this;
        radioButton.addEventListener('click', function() {
          me.travelMode = mode;
          me.route();
        });
      };

      AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(autocomplete, mode) {
        var me = this;
        autocomplete.bindTo('bounds', this.map);
        autocomplete.addListener('place_changed', function() {
          var place = autocomplete.getPlace();
          if (!place.place_id) {
            window.alert("Please select an option from the dropdown list.");
            return;
          }
          if (mode === 'ORIG') {
            me.originPlaceId = place.place_id;
          } else {
            me.destinationPlaceId = place.place_id;
          }
          me.route();
        });

      };

      AutocompleteDirectionsHandler.prototype.route = function() {
        if (!this.originPlaceId || !this.destinationPlaceId) {
          return;
        }
        var me = this;

        this.directionsService.route({
          origin: {'placeId': this.originPlaceId},
          destination: {'placeId': this.destinationPlaceId},
          travelMode: this.travelMode
        }, function(response, status) {
          if (status === 'OK') {
            me.directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      };

      </script>
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=MY API KEY&libraries=places&callback=initMap">
    </script>
   <!-- End of Map -->      

      </body>

</html>

Answer 1

您的问题似乎是这些问题：

    // these lines are invalid
    var geocoder = new google.maps.geocoder;
    var service = new google.maps.DistanceMatrixService;




    }) // this is not tied to anything

你有一些额外的括号。您还有几行无效代码。如果要调用这些构造函数，则需要调用它们()

GMaps API地方自动填充功能＆amp;路线 - 地图未初始化

1 个答案: