Google지도 API를 사용하여 Ajax 요청

내 사용자가 내 웹 사이트에서 위치를 검색 할 수 있도록 실시간 검색 상자를 만들려고합니다. 제안 목록에 JqueryUI Autocomplete 함수와 GoogleMap API를 사용하고 있습니다. 검색 입력 (#searchbox)는 텍스트 값을 보여주는 유지하면서Google지도 API를 사용하여 Ajax 요청

... 
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
</head> 

<body> 
<div id="content"> 
    <h1>Google Maps Autocomplete Search Sample</h1> 
    <div align="left"> 
     <form method="post" action="#"> 
      <input type="text" value="" id="searchbox" name="searchbox" style=" width:800px;height:30px; font-size:15px;"> 
      <input type="submit" /> 
      <div class="ui-widget" style="margin-top:2em; font-family:Arial"> 
       Result: 
       <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> 
      </div> 
     </form> 
    </div> 
    <div align="left" id="map" style="width:800px; height: 600px; margin-top: 10px; "> 
    </div> 
</div> 
<?php 
include_once('inc/foot.php'); 
?> 
<script type="text/javascript"> 
$(document).ready(function(){ 

    var mapOptions = { 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: new google.maps.LatLng(41.06000,28.98700) 
    }; 



    var map = new google.maps.Map(document.getElementById("map"),mapOptions); 

    var geocoder = new google.maps.Geocoder(); 

    $(function() { 

     function log(message) { 
      $("<div/>").text(message).prependTo("#log"); 
      $("#log").attr("scrollTop", 0); 
     } 

     $("#searchbox").autocomplete({ 

      source: function(request, response) { 

      if (geocoder == null){ 
      geocoder = new google.maps.Geocoder(); 
      } 
      geocoder.geocode({'address': request.term }, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 

        var searchLoc = results[0].geometry.location; 
       var lat = results[0].geometry.location.lat(); 
        var lng = results[0].geometry.location.lng(); 
        var latlng = new google.maps.LatLng(lat, lng); 
        var bounds = results[0].geometry.bounds; 

        geocoder.geocode({'latLng': latlng}, function(results1, status1) { 
         if (status1 == google.maps.GeocoderStatus.OK) { 
         if (results1[1]) { 
         response($.map(results1, function(loc) { 
         return { 
          label : loc.formatted_address, 
          value : loc.formatted_address+loc.geometry.location, 
          bounds : loc.geometry.bounds 
          } 
         })); 
         } 
         } 
        }); 
      } 
       }); 
      }, 
      select: function(event,ui){ 
       var pos = ui.item.position; 
       var lct = ui.item.locType; 
       var bounds = ui.item.bounds; 
       log(ui.item ? 
        ui.item.value : 
        "undefined_by_google" + this.value); 

     if (bounds){ 
     map.fitBounds(bounds); 
     } 
      } 
     }); 
    }); 
}); 
</script>

내가 사업부 (#log를)로드 할 수있는 방법을 찾으려면에만 좌표 : 여기

코드입니다 .

나는 ... 그렇지 않으면 그냥 나에게, 충분히 분명 당신의 도움에 대한 감사합니다 희망

편집

문제 해결, 그냥 필요, 쉬운 조용했다 : "(

$ #log "). html ("위도 : "+ lat +"경도 : "+ lng); 에드가

그것을 한 번 봐 가지고위한

감사

출처

2011-05-07 Victor

현재 코드가 정상적으로 실행됩니까? 누락 된 것이 무엇입니까? –

예 코드가 완벽하게 실행되고, 별도의 div에서 (검색 결과로 반환 된) 좌표를 분리하고 싶습니다. 단순한 요청이지만 자바 스크립트에 관한 지식은 매우 제한되어 있습니다 ... – Victor

당신은 단 한 줄의 코드를 추가 한 다음 하나의 변화를 확인해야

이 문자열의 마지막 위치를 저장됩니다 :

   lastLoc='('+lat+','+lng+')';

이 로그에 인쇄합니다 : 볼

log(ui.item ? lastLoc : "undefined_by_google" + this.value);

가 바이올린을 참조하십시오 이 줄의 위치 : working example

출처

2011-05-07 04:01:54 ampersand

Google지도 API를 사용하여 Ajax 요청

답변

관련 문제