2009-11-28 39 views
0

我試用Google地圖API地理編碼功能。地圖加載正常,但即時通訊面臨地理編碼問題。我在輸入位置的頁面上有一個文本框,點擊提交按鈕,我想查明地圖上輸入的位置。谷歌地圖API中的地理編碼問題

setCenter方法正確標記地圖上的位置,第一次用預定義座標調用它。但是,在我爲getLatLng定義的回調函數內調用時,地圖上的位置不會更改以反映用戶輸入的位置。

任何有關如何解決這個問題的幫助將非常感激。以下是我的代碼。

<html> 
    <head> 
     <title>Google Maps</title> 
     <script type="text/javascript" src="http://www.google.com/jsapi?key=my_api_key"> </script> 
     <script type="text/javascript" charset="utf-8"> 
      google.load("maps", "2.x"); 
      google.load("jquery", "1.3.1"); 
     </script> 

     <script> 


      $(document).ready(function(){ 
      var map = new GMap2(document.getElementById('map')); 
      var burnsvilleMN = new GLatLng(44.797916,-93.278046); 
      map.setCenter(burnsvilleMN, 8); 

       $("#add-point").submit(function(){ 
       geoEncode(); 
       return false; 
      }); 
      }); 

      function geoEncode(){ 

      var geocoder = new GClientGeocoder(); 
      var reasons = []; 
      reasons[G_GEO_SUCCESS] = "Success"; 
      reasons[G_GEO_MISSING_ADDRESS] = "Missing Address"; 
      reasons[G_GEO_UNKNOWN_ADDRESS] = "Unknown Address."; 
      reasons[G_GEO_UNAVAILABLE_ADDRESS] = "Unavailable Address"; 
      reasons[G_GEO_BAD_KEY] = "Bad API Key"; 
      reasons[G_GEO_TOO_MANY_QUERIES] = "Too Many Queries"; 
      reasons[G_GEO_SERVER_ERROR] = "Server error"; 

      var address = $("#add-point input[name=address]").val(); 
      if (geocoder) { 

       geocoder.getLatLng(address, function(point){ 
        if (!point) { 
         alert(address + " not found"); 
        } 
        else { 

         map.setCenter(point, 13); 
         var marker = new GMarker(point); 
         map.addOverlay(marker); 
         marker.openInfoWindowHtml(address); 
        } 
       }); 
      } 
      else { 
       alert("Some Error :("); 
      } 

      } 
     </script> 
     <style type="text/css"> 

      #map { width:500px; height:500px;float:right;} 
      #add-point { float:left; } 
      div.input { padding:3px 0; } 
      label { display:block; font-size:80%; } 
      input, select { width:150px; } 
      button { float:right; } 
      div.error { color:red; font-weight:bold; } 


     </style> 

    </head> 


    <body> 

     <form id="add-point" action="" method="POST"> 
      <input type="hidden" name="action" value="savepoint" id="action"> 

      <fieldset> 
       <legend>Add a Point to the Map</legend> 
       <div class="error" style="display:none;"></div> 

       <div class="input"> 

        <label for="name">Location Name</label> 

        <input type="text" name="name" id="name" value=""> 

       </div> 

       <div class="input"> 

        <label for="address">Address</label> 

        <input type="text" name="address" id="address" value=""> 

       </div> 

       <button type="submit">Add Point</button> 

      </fieldset> 

     </form> 

     <div id="map"></div> 

    </body> 
</html> 

謝謝。

回答

1

什麼stefpet意味着更換

 $(document).ready(function(){ 
      var map = new GMap2(document.getElementById('map')); 
      var burnsvilleMN = new GLatLng(44.797916,-93.278046); 
      map.setCenter(burnsvilleMN, 8); 

       $("#add-point").submit(function(){ 
        geoEncode(); 
      return false; 
     }); 
     }); 

有:

 var map; 
     $(document).ready(function(){ 
      map = new GMap2(document.getElementById('map')); 
      var burnsvilleMN = new GLatLng(44.797916,-93.278046); 
      map.setCenter(burnsvilleMN, 8); 

       $("#add-point").submit(function(){ 
        geoEncode(); 
      return false; 
     }); 
     }); 
1

您聲明的GMap2實例作爲地圖在jQuery.ready()函數的局部範圍。然後,您可以參考地圖,因爲它是geoEncode()函數中的全局變量。