Javascript 为什么Google PlacesService或Geocode不将结果保存在函数中？_Javascript_Laravel_Google Maps_Google Maps Api 3

Javascript 为什么Google PlacesService或Geocode不将结果保存在函数中？

javascript laravel google-maps google-maps-api-3

Javascript 为什么Google PlacesService或Geocode不将结果保存在函数中？,javascript,laravel,google-maps,google-maps-api-3,Javascript,Laravel,Google Maps,Google Maps Api 3,我试图在findPlaceFromQuery（）中传递变量值。但它没有传递值。相反，我的函数返回初始化的值。我试着用谷歌搜索我自己，但我没有找到解决办法。在其他函数中获取值是很常见的，但在这里是不可能的。我做了很多次，但它在findPlaceFromQuery（）中不起作用。而且它对地理编码也不起作用在脚本末尾的getZone（）函数中有一个变量名check。我已将他的值设置为“无”作为默认值。并希望在findPlaceFromQuery（）中设置并返回check的值。请帮帮我。我被困在这里面

我试图在

findPlaceFromQuery（）

中传递变量值。但它没有传递值。相反，我的函数返回初始化的值。我试着用谷歌搜索我自己，但我没有找到解决办法。在其他函数中获取值是很常见的，但在这里是不可能的。我做了很多次，但它在

findPlaceFromQuery（）

中不起作用。而且它对地理编码也不起作用

在脚本末尾的

getZone（）

函数中有一个变量名

check

。我已将他的值设置为“无”作为默认值。并希望在

findPlaceFromQuery（）

中设置并返回

check

的值。请帮帮我。我被困在这里面太多了

也请建议我，如果我可以这样做与谷歌自动完成

这是我的javascript代码


window.onload=初始化映射；
var地图、地理编码器、原始输入、目标输入、原始地图、目标地图；
函数初始化映射（）{
//var信息窗口；
map=new google.maps.map（document.getElementById（'map'）{
mapTypeControl:false，
中心：{lat:-33.8688，lng:151.2195}，
缩放：13
});
geocoder=新的google.maps.geocoder（）；
新的自动完成方向Shandler（map）；
}
功能手柄位置错误（浏览器具有地理位置、信息窗口、pos）{
信息窗口。设置位置（pos）；
infoWindow.setContent（browserHasGeolocation？
“错误：地理位置服务失败。”：
'错误：您的浏览器不支持地理位置。'）；
打开（地图）；
}
/**
*@constructor
*/
函数自动完成方向Shandler（map）{
this.map=map；
this.originPlaceId=null；
this.destinationPlaceId=null；
this.travelMode='DRIVING'；
this.directionsService=新的google.maps.directionsService；
this.directionsrender=新的google.maps.directionsrender；
这个.directionsrender.setMap（map）；
originInput=document.getElementById（'origin-input'）；
//var via1Input=document.getElementById（'via1-input'）；
destinationInput=document.getElementById（'destination-input'）；
var waypoint1=document.getElementById（'waypoint1'）；
var waypoint2=document.getElementById（'waypoint2'）；
var waypoint3=document.getElementById（'waypoint3'）；
//var modeSelector=document.getElementById（'mode-selector'）；
var originAutocomplete=新的google.maps.places.Autocomplete（originInput）；
var waypoint1Autocomplete=新的google.maps.places.Autocomplete（waypoint1）；
var waypoint2Autocomplete=新的google.maps.places.Autocomplete（waypoint2）；
var waypoint3Autocomplete=新的google.maps.places.Autocomplete（waypoint3）；
//仅指定所需的位置数据字段。
//console.log（originAutocomplete）；
originAutocomplete.setFields（['place_id'，'types']）；
var destinationAutocomplete=new google.maps.places.Autocomplete（destinationInput）；
//console.log（destinationAutocomplete）；
//仅指定所需的位置数据字段。
destinationAutocomplete.setFields（['place_id'，'types']）；
//航路点1自动完成。设置字段（['place_id']）；
//航路点2自动完成。设置字段（['place_id']）；
//航路点3自动完成。设置字段（['place_id']）；
此.setupPlaceChangedListener（originAutocomplete，'ORIG'）；
此.setupPlaceChangedListener（destinationAutocomplete，'DEST'）；
//此.setupPlaceChangedListener（航路点1自动完成，'DEST'）；
//此.setupPlaceChangedListener（航路点2自动完成，'DEST'）；
//此.setupPlaceChangedListener（航路点3自动完成，'DEST'）；
}
AutoCompletedDirectionShandler.prototype.setupPlaceChangedListener=函数(
自动完成，模式）{
var me=这个；
autocomplete.bindTo（'bounds'，this.map）；
autocomplete.addListener（'place\u changed'，function（）{
var place=autocomplete.getPlace（）；
如果（！place.place\u id）{
window.alert（'请从下拉列表中选择一个选项'）；
返回；
}
如果（模式=='ORIG'）{
me.originPlaceId=place.place\u id；
}否则{
me.destinationPlaceId=place.place\u id；
}
//console.log（me）；
我。路线（）；
});
};
AutoCompletedDirectionShandler.prototype.route=函数（）{
如果（！this.originPlaceId | |！this.destinationPlaceId）{
返回；
}
var me=这个；
var-waypts=[]；
var checkboxArray=document.getElementById（“航路点”）；
如果（航路点1.value！=''）{
推({
位置：航路点1.0，
中途停留：对
});
}
如果（航路点2.value！=''）{
推({
位置：waypoint2.value，
中途停留：对
});
}
如果（航路点3.value！=''）{
推({
位置：航路点3.0，
中途停留：对
});
}
//控制台日志（waypts）；
此路径为.DirectionService.route(
{
原点：{'placeId'：this.originPlaceId}，
目标：{'placeId'：this.destinationPlaceId}，
航路点：航路点，
航路点：对，
travelMode:this.travelMode
},
功能（响应、状态）{
如果（状态=='OK'）{
me.directionsRenderer.setDirections（响应）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
};
var航路点=0；
函数addVia（）
{
航路点++；
$（'#via-'+航路点）.show（）；
$（“#vialabel-”+航路点）.show（）；
//this.destinationPlaceId=null；
如果（航路点==3）
{
$（'#addvia'）.hide（）
}
}
函数onDestinationChange（数据）
{
var pickupLocation=getZone（originInput.value）；
var destinationLocation=getZone（destinationInput.value）；
设置超时(
函数（）
{
控制台日志（pickupLocation）；
if（拾取定位）
{
jQuery.ajax({
url:“/calculateroutecost”，
类型：“POST”，
数据：{u令牌：{{csrf_令牌（）}}，pickupLocation:pickupLocation，destinationLocation:destinationLocation}，
数据类型：“json”，
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!--Replace the key placeholder with your actual API Key-->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initializeMap&&libraries=places&v=weekly"
      defer
    ></script>
  </head>
  <body>
    <div id="floating-panel">
      <input id="origin" type="textbox">
      <input id="destination" type="textbox">
      <input id="submit" type="button" value="Get Directions">
    </div>
    <div id="map"></div>
  </body>
</html>

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#floating-panel {
    position: absolute;
    top: 10px;
    left: 25%;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: 'Roboto', 'sans-serif';
    line-height: 30px;
    padding-left: 10px;
}


var map, selected_origin, selected_destination;
function initializeMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    mapTypeControl: false,
    center: {lat: -33.8688, lng: 151.2195},
    zoom: 13
  });
  //Call the function for the autocomplete and place details service
  new AutocompleteHandler();
  document.getElementById('submit').addEventListener('click', function() {
        DirectionsHandler();
  });
}

function AutocompleteHandler() {
    //Learn more about Places Autocomplete here: https://developers.google.com/maps/documentation/javascript/places-autocomplete
  const originInput = document.getElementById("origin");
  const destinationInput = document.getElementById("destination");
  var autocomplete_origin = new google.maps.places.Autocomplete(originInput);
  var autocomplete_destination =   new google.maps.places.Autocomplete(destinationInput);
  //add .setfields so that you will only get the data that you need to prevent additional costs 
  //Here is the list of available fields that you can use: https://developers.google.com/places/web-service/place-data-fields
  autocomplete_origin.setFields(["formatted_address"]);
  autocomplete_destination.setFields(["formatted_address"]);
  // Set a listener to the autocomplete to get the details of the selected place
  //learn more about how to get the place information here: https://developers.google.com/maps/documentation/javascript/places-autocomplete#get-place-information
  autocomplete_origin.addListener("place_changed", () => {
    selected_origin = autocomplete_origin.getPlace();
  });   
  autocomplete_destination.addListener("place_changed", () => {
    selected_destination = autocomplete_destination.getPlace();
  });
}

function DirectionsHandler(){
    // Learn more about the Directions Service here: https://developers.google.com/maps/documentation/javascript/directions#DirectionsRequests
    const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
    directionsRenderer.setMap(map);
  directionsService.route(
    {
      origin: {
        query: selected_origin.formatted_address
      },
      destination: {
        query: selected_destination.formatted_address
      },
      travelMode: google.maps.TravelMode.DRIVING
    },
    (response, status) => {
      if (status === "OK") {
        directionsRenderer.setDirections(response);
      } else {
        window.alert("Directions request failed due to " + status);
      }
    }
  );
}