Question

现在，代码使用浏览器的GEO位置来确定用户所在的位置，并计算从位置列表中的每个位置到用户的距离。它对下拉列表中的列表进行排序，并要求用户在那里手动选择一个位置（这大部分时间是排序列表顶部的最短位置）。

在选择完成后单击下拉列表下方的按钮，将执行与用户选择相关联的链接。

我想用Google API地址字段替换自动确定用户位置的代码。应该要求用户键入地址，选择正在显示的一个自动填充选项，并转发到与最接近所选地址的位置相关联的链接。选择地址后触发的事件：

正在计算所选地址与位置列表中的位置之间的距离
将确定最近的位置（用户对此没有发言权）
将执行与最近位置相关联的链接（a href）。视觉最终结果应该只是一个地址字段。我包含了下拉菜单和按钮，因为我认为可以使用大部分底层代码完成，即使我还没有这样做。

感谢Ali将代码上传到小提琴中：

https://fiddle.jshell.net/ali_soltani/5h283178/4/

Answer 1

我能够提出一个使用JSON的解决方案并且只需要一个地址字段，正如我试图解释的那样。我不是一个程序员（只是想成为一个人），而且我自己也很难正确表达，但我希望这个解决方案对某些人有用。请务必将自己的Google API密钥粘贴到“PASTE_YOUR_GOOGLE_API_KEY_HERE”按钮上，以便它运行。

您可以在此处获取密钥：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>

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

1 个答案: