Question

我有一个带有Google Maps API的项目。除了未显示通过输入值添加的Google Marker之外，其他所有功能均正常运行。我有输入，其中两个分别是起点和终点，方向都显示得很完美，但是稍后添加的第三个输入却没有显示。我有一个不同的职能来照顾它。

<input type="text" class="form-control" id="origin_input" name="origin_input">
<input type="text" class="form-control" id="destination_input" name="destination_input">
<input type="text" class="form-control" id="stopOver">

这是我的Google Map JavaScript：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    mapTypeControl: false,
    center: {
      lat: 7.946527,
      lng: -1.023194
    },
    zoom: 8
  });

  new AutocompleteDirectionsHandler(map);
  addStopOverMarker(map);
}

function addStopOverMarker(map) {
  this.map = map;
  var stopOver = new google.maps.places.Autocomplete(document.getElementById('stopOver'));

  google.maps.event.addListener(stopOver, 'place_changed', function() {
    var coord = stopOver.getPlace().geometry.location;
    console.log(coord);
    window.post = coord;
  });
  var marker = new google.maps.Marker({
    position: window.post,
    icon: 'https://png.icons8.com/color/50/000000/street-view.png',
    map: map,
    draggable: true,
    visible: true
  });
}

/**
 * @constructor
 */
function AutocompleteDirectionsHandler(map) {
  this.map = map;
  this.originPlaceId = null;
  this.destinationPlaceId = null;
  this.travelMode = 'DRIVING';
  var originInput = document.getElementById('origin_input');
  var destinationInput = document.getElementById('destination_input');
  this.directionsService = new google.maps.DirectionsService;
  this.directionsDisplay = new google.maps.DirectionsRenderer;
  // this.service = new google.maps.DistanceMatrixService;
  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.setupPlaceChangedListener(originAutocomplete, 'ORIG');
  this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');
}

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

Answer 1

您的addStopover函数遇到三个问题：

您使用了错误的map变量
该图标不存在
您正在place_changed事件触发之前创建标记，并且其回调函数将运行

该功能的工作版本：

function addStopOverMarker(map) {
  var stopOver = new google.maps.places.Autocomplete(document.getElementById('stopOver'));
  google.maps.event.addListener(stopOver, 'place_changed', function() {
    var coord = stopOver.getPlace().geometry.location;
    console.log(coord);
    var marker = new google.maps.Marker({
      position: coord,
      map: map,
      draggable: true,
      visible: true
    });
  });
}

proof of concept fiddle

代码段：

html,
body,
#map {
  height: 90%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

<div id="map"></div>
<input id="origin_input" value="Tecmiman" />
<input id="destination_input" value="Kumasi" />
<input id="stopOver" value="Bechem" />
<script>
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      mapTypeControl: false,
      center: {
        lat: 7.946527,
        lng: -1.023194
      },
      zoom: 8
    });
    new AutocompleteDirectionsHandler(map);
    addStopOverMarker(map);
  }

  function addStopOverMarker(map) {
    var stopOver = new google.maps.places.Autocomplete(document.getElementById('stopOver'));

    google.maps.event.addListener(stopOver, 'place_changed', function() {
      var coord = stopOver.getPlace().geometry.location;
      console.log(coord);
      var marker = new google.maps.Marker({
        position: coord,
        map: map,
        draggable: true,
        visible: true
      });
    });
  }

  /**
   * @constructor
   */
  function AutocompleteDirectionsHandler(map) {
    this.map = map;
    this.originPlaceId = null;
    this.destinationPlaceId = null;
    this.travelMode = 'DRIVING';
    var originInput = document.getElementById('origin_input');
    var destinationInput = document.getElementById('destination_input');
    this.directionsService = new google.maps.DirectionsService;
    this.directionsDisplay = new google.maps.DirectionsRenderer;
    // this.service = new google.maps.DistanceMatrixService;
    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.setupPlaceChangedListener(originAutocomplete, 'ORIG');
    this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');

  }

  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 src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap"></script>

未显示Google Maps Marker-自动完成

1 个答案: