javascript - 自动完成地址字段触发器到最近列出的GEO位置

Question

现在，代码使用浏览器的地理位置来确定用户的位置，并计算从位置列表中的每个位置到用户的距离。它在下拉列表中对列表进行排序，并要求用户手动选择一个位置（大多数情况下，这是排序列表顶部最短的位置）。
通过在进行选择后单击下拉列表下面的按钮，将执行与用户选择相关联的链接。
我想用google api地址字段替换自动确定用户位置的代码。用户应该被要求输入一个地址，选择一个正在显示的自动填充选项，并转发到与所选地址最近的位置相关联的链接。选择地址后触发的事件：
正在计算所选地址和位置列表中的位置之间的距离
将确定最近的位置（用户对此没有发言权）
将执行与最近位置关联的链接（a href）。可视的最终结果应该只是一个地址字段。我包含了下拉菜单和按钮，因为我认为这可以用很多底层代码来完成，尽管我还不能这样做。
感谢阿里将代码上传到小提琴上：
https://fiddle.jshell.net/ali_soltani/5h283178/4/

Answer 1

我能够想出一个使用JSON的解决方案，并采用“只有一个地址字段”，正如我试图解释的那样。我不是一个编码员（只是想成为一个编码员），我自己仍然很难正确地表达，但我希望这个解决方案对某人有用。请确保将自己的google api密钥粘贴在按钮上，按钮上写着“在这里粘贴你的google api密钥”，以便它运行。
您可以在此处获取密钥：https://developers.google.com/maps/documentation/javascript/get-api-key
我的解决方案：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script>
 var elem1 = {id:"New York",link:"http://bla1.com",longitude:-73.935242,latitude:40.730610};
 var elem2 = {id:"Los Angeles",link:"http://bla2.com",longitude:-118.243683,latitude:34.052235};
 var elem3 = {id:"Detroit_whoop_whoop",link:"http://bla3.com",longitude:-83.045753,latitude:42.331429};

 var elemArry = [elem1,elem2,elem3];

function jDistance(lon1, lat1,elm ) {
	var lon2 = elm.longitude;
	var lat2 = elm.latitude;
	var R = 6371; // Radius of the earth in km
  var dLat = (lat2-lat1).toRad();  // Javascript functions in radians
  var dLon = (lon2-lon1).toRad(); 
  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
          Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * 
          Math.sin(dLon/2) * Math.sin(dLon/2); 
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
  var d = R * c; // Distance in km
	//console.log("distance "+d);
	elm.distance = d;
  return d;
  
}


/** Converts numeric degrees to radians */
if (typeof(Number.prototype.toRad) === "undefined") {
  Number.prototype.toRad = function() {
    return this * Math.PI / 180;
  }
}

function setandsortPosition(pos_1) { 
   console.log("navigator.geolocation start ");
   console.log("pos_1.lon " +pos_1.lon);
   console.log("pos_1.lat " +pos_1.lat);

 for (var elm in elemArry){
	jDistance(pos_1.lon, pos_1.lat,elemArry[elm]);
 }
	elemArry.sort((a, b) => parseFloat(a.distance) - parseFloat(b.distance));
  window.location.href = elemArry[0].link;
}

</script>

<div id="locationField"><input id="autocomplete" placeholder="&gt; Enter your address here &lt;" type="text" style="text-align: center;"  /></div>

<script>

      var placeSearch, autocomplete;
      var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
      };

      function initAutocomplete() {
       
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
            {types: ['geocode']});

       
        autocomplete.addListener('place_changed', fillInAddress);
      }

      function fillInAddress() {
        
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
        console.log("component "+ component);
        //  document.getElementById(component).value = '';
       //   document.getElementById(component).disabled = false;
        }

        
        for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            if (val != null){
            console.log("addressType "+addressType);
            //document.getElementById(addressType).value = val;
            }
            
          }
        }
         
         console.log("lat "+place.geometry.location.lat());
           console.log("lng "+ place.geometry.location.lng());
           var geolocation = {
              lat: place.geometry.location.lat(),
              lon: place.geometry.location.lng()
            };
             setandsortPosition(geolocation) ;

        }
  

</script><script src="https://maps.googleapis.com/maps/api/js?key=PASTE_YOUR_GOOGLE_API_HERE&amp;libraries=places&amp;callback=initAutocomplete" async="" defer="defer"></script>