2014-10-08 5 views
0

아래는 위도/경도로 자동 완성을 제공하는 코드입니다. 결과가 도시와 관련이 있기를 원합니다. 자동 완성 검색은 도시로 제한되어야합니다. 빨리 자동 완성 결과 (도시 생략)를 도시로 제한하는 방법

<!DOCTYPE html> 
    <html> 
     <head> 
     <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> 
     <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places" type="text/javascript"></script> 

<script type="text/javascript"> 
$("#autocomplete").on('focus', function() { 
    geolocate(); 
}); 

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 initialize() { 
    autocomplete = new google.maps.places.Autocomplete(
    /** @type {HTMLInputElement} */ (document.getElementById('autocomplete')), { 
     types: ['geocode'] 
    }); 

    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     fillInAddress(); 
    }); 
} 

function fillInAddress() { 

    var place = autocomplete.getPlace(); 

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

    for (var component in componentForm) { 
     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]]; 
      document.getElementById(addressType).value = val; 
     } 
    } 
} 

function geolocate() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function (position) { 
      var geolocation = new google.maps.LatLng(
      position.coords.latitude, position.coords.longitude); 

      var latitude = position.coords.latitude; 
      var longitude = position.coords.longitude; 
      document.getElementById("latitude").value = latitude; 
      document.getElementById("longitude").value = longitude; 

      autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation)); 
     }); 
    } 

} 

initialize(); 

</script> 
     </head> 
<body onload="initialize()"> 
<div id="locationField"> 
    <input id="autocomplete" size="60" placeholder="Enter your address" type="text"></input> 
</div> 
<table id="address"> 
    <tr> 
     <td class="label">Lat</td> 
     <td class="slimField"> 
      <input type="text" class="field" id="latitude"></input> 
     </td> 
     <td class="label">Long</td> 
     <td class="wideField"> 
      <input type="text" class="field" id="longitude"></input> 
     </td> 
    </tr> 
</table> 
</body> 
</html> 
+0

'도시로 제한'을 의미합니까? –

+0

자동 완성 주소 필드에서 특정 도시에 대해 검색을 수행하려면 인도 방갈로 (Bangalore)라고 말하십시오. 내가 "Korm ...."을 타이핑하면 bangalore에서 "Kormangala"가 단지 –

+0

인데, 여기서 확인해야합니다. http://stackoverflow.com/questions/8282026/how-to-limit-google-autocomplete- 결과 - 도시 및 국가 전용 –

답변

0
$.get("http://ipinfo.io", function (response) { 
    $("#ip").html("IP: " + response.ip); 
    $("#address").html("Location: " + response.city + ", " + response.region); 
    $("#details").html(JSON.stringify(response, null, 4)); 
}, "jsonp"); 

로 .. 도와주세요 여기 당신에게 위도 및 시간에 따른 도시를 말할 것이다 바이올린 http://jsfiddle.net/zK5FN/2/입니다.
ipinfo.io를 사용합니다.

+0

답변을 주셔서 감사하지만 내가 무엇을 필요로하는지 설명해 드리겠습니다. 자동 완성 주소 입력란에서 특정 도시에 대해 검색을 수행하고 싶습니다. 방갈로르, 인도. "Korm ...."을 타이핑하면 방갈로에만 "Kormangala"가 표시됩니다. –

관련 문제