Google Maps API 中的地理编码问题答案

【问题标题】：Issue with Geocoding in Google Maps APIGoogle Maps API 中的地理编码问题
【发布时间】：2009-11-28 07:38:23
【问题描述】：

我正在尝试 Google Maps 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>

谢谢。

【问题讨论】：

标签： javascript jquery google-maps

【解决方案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;
         });
      });

【讨论】：

【解决方案2】：

您在 jQuery.ready() 函数的本地范围内将 GMap2 实例声明为 map。然后你引用 map，因为它是 geoEncode() 函数中的一个全局变量。

【讨论】：