2009-11-28 133 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()函数中的全局变量。