取Latitude& Google Place自动填充和路线脚本的经度 [英] Fetch Latitude & Longitude from Google Place Autocomplete and Directions script

问题描述

有谁知道如何从这个谷歌地方自动完成和路线脚本获取经纬度？

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-directions

我想将经纬度值传递给隐藏字段，如下所示：

 < input type =hiddenid =latitudename =latitude/> 
< input type =hiddenid =longitudename =longitude/> 
  

解决方案

1. 移除 {placeIdOnly：true} rel =nofollow noreferrer> AutocompleteOptions 。使用该设置，地点对象只包含名称和 placeId




2. 从地点对象获取经纬度，如下所示：

  document.getElementById（latitude） .value = place.geometry.location.lat（）; 
 document.getElementById（longitude）。value = place.geometry.location.lng（）; 
  

概念证明小提琴

代码段：

<

//此示例需要Places库。第一次加载API时包含libraries = places //参数。例如：//< script src =https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places>函数initMap（）{var map = new google.maps。 Map（document.getElementById（'map'），{mapTypeControl：false，center：{lat：-33.8688，lng：151.2195}，zoom：13}）;新的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（地图）; 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）;} //在单选按钮上设置一个侦听器来更改地点上的过滤器类型// Autocomplete.AutocompleteDirectionsHandler.prototype.setupClickListener = function（id ，模式）{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（请从下拉列表中选择一个选项。）; return;} if （mode ==='ORIG'）{me.originPlaceId = place.place_id; document.getElementById（orig_latitude）。value = place.geometry.location.lat（）; document.getElementById（orig_longitude）。value = place.geometry.location.lng（）;} else {me.destinationPlaceId = place.place_id; document.getElementById（dest_latitude）。value = place.geometry.location.lat（）; document.getElementById（dest_longitude） .value = place.geometry.location.lng（）;} 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 requests failed to +'status'）;}}）;};

/ *总是显式设置地图高度以定义包含地图的div *元素的大小。 * /＃map {height：100％;} / *可选：使样本页面填满窗口。 * / html，body {height：100％;保证金：0; padding：0;}。controls {margin-top：10px;边框：1px实心透明; border-radius：2px 0 0 2px;盒子尺寸：边框; -moz-box-sizing：border-box; height：32px;概要：无; box-shadow：0 2px 6px rgba（0，0，0，0.3）;}＃origin-input，＃destination-input {background-color：#fff;字体家族：Roboto; font-size：15px; font-weight：300; margin-left：12px;填充：0 11px 0 13px;文本溢出：省略号; width：200px;}＃origin-input：focus，＃destination-input：focus {border-color：＃4d90fe;}＃mode-selector {color：#fff; background-color：＃4d90fe; margin-left：12px; padding：5px 11px 0px 11px;}＃mode-selector label {font-family：Roboto; font-size：13px;字体重量：300;}

< input type = textid =orig_latitudename =orig_latitude/>< input type =textid =orig_longitudename =orig_longitude/>< br>< input type =textid =dest_latitudename =dest_latitude/>< input type =textid =dest_longitudename =dest_longitude/>< input id =origin-inputclass =controlstype = textplaceholder =输入源地址><输入ID =目的地输入class =controlstype =textplaceholder =输入目标地址>< div id =mode -selectorclass =controls> < input type =radioname =typeid =changemode-walkingchecked =checked> < label for =changemode-walking>散步< / label> < input type =radioname =typeid =changemode-transit> < label for =changemode-transit> Transit< / label> < input type =radioname =typeid =changemode-driving> < label for =changemode-driving>驾驶< / label>< / div>< div id =map>< / div><！ - 将key参数的值替换为您自己的API密钥。 - >< script src =https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMapasync defer>< / script>

Does anyone know how to fetch latitude and longitude from within this google Place Autocomplete and Directions script?

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-directions

I'd like to pass the latitude and longitude value to a hidden field like below:

<input type="hidden" id="latitude" name="latitude"  />
<input type="hidden" id="longitude" name="longitude"  />

解决方案

1. Remove the {placeIdOnly: true} from the AutocompleteOptions. With that set the place object only includes the name and placeId of the place.

2. get the latitude and longitude from the place object like this:

  document.getElementById("latitude").value= place.geometry.location.lat();
  document.getElementById("longitude").value= place.geometry.location.lng();

proof of concept fiddle

code snippet:

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    mapTypeControl: false,
    center: {
      lat: -33.8688,
      lng: 151.2195
    },
    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);
}

// 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;
      document.getElementById("orig_latitude").value = place.geometry.location.lat();
      document.getElementById("orig_longitude").value = place.geometry.location.lng();
    } else {
      me.destinationPlaceId = place.place_id;
      document.getElementById("dest_latitude").value = place.geometry.location.lat();
      document.getElementById("dest_longitude").value = place.geometry.location.lng();
    }
    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);
    }
  });
};

/* 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;
}
.controls {
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 32px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#origin-input,
#destination-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 200px;
}
#origin-input:focus,
#destination-input:focus {
  border-color: #4d90fe;
}
#mode-selector {
  color: #fff;
  background-color: #4d90fe;
  margin-left: 12px;
  padding: 5px 11px 0px 11px;
}
#mode-selector label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}

<input type="text" id="orig_latitude" name="orig_latitude" />
<input type="text" id="orig_longitude" name="orig_longitude" />
<br>
<input type="text" id="dest_latitude" name="dest_latitude" />
<input type="text" id="dest_longitude" name="dest_longitude" />

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

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

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

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script>

这篇关于取Latitude&amp; Google Place自动填充和路线脚本的经度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！