Skip to main content
 首页 » 编程设计

javascript之Google Maps API之如何在不显示 map 的情况下从自动完成中获取纬度和经度

2024年04月18日28mate10pro

我正在尝试从自动完成 Google map API 获取纬度和经度,但不显示 map 。在我的脚本中,自动完成功能运行良好,但我无法获取纬度和经度。

    <script type="text/javascript"> 
       function initialize() { 
     
     var options = { 
      types: ['(cities)'] 
     }; 
     
     var input = document.getElementById('searchTextField'); 
     var autocomplete = new google.maps.places.Autocomplete(input, options); 
    } 
       google.maps.event.addDomListener(window, 'load', initialize); 
     
       var geocoder = new google.maps.Geocoder(); 
        var address = autocomplete; 
     
    geocoder.geocode( { 'address': address}, function(results, status) { 
     
      if (status == google.maps.GeocoderStatus.OK) { 
        var latitude = results[0].geometry.location.lat(); 
        var longitude = results[0].geometry.location.lng(); 
        alert(latitude); 
      }  
    });  
     
    </script>

请您参考如下方法:

您可以使用下面的代码。

<script src="http://maps.googleapis.com/maps/api/js?libraries=places" type="text/javascript"></script> 
 
<script type="text/javascript"> 
    function initialize() { 
        var input = document.getElementById('searchTextField'); 
        var autocomplete = new google.maps.places.Autocomplete(input); 
        google.maps.event.addListener(autocomplete, 'place_changed', function () { 
            var place = autocomplete.getPlace(); 
            document.getElementById('city2').value = place.name; 
            document.getElementById('cityLat').value = place.geometry.location.lat(); 
            document.getElementById('cityLng').value = place.geometry.location.lng(); 
            //alert("This function is working!"); 
            //alert(place.name); 
           // alert(place.address_components[0].long_name); 
 
        }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize);  
</script> 

这部分位于您的表单内:

<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />   
<input type="hidden" id="city2" name="city2" /> 
<input type="hidden" id="cityLat" name="cityLat" /> 
<input type="hidden" id="cityLng" name="cityLng" />