首页 文章

Google Maps API中的地理编码问题

提问于
浏览 次
0

我正在尝试使用Google Maps API地理编码功能 . Map 加载正常，但我面临地理编码问题 . 我在页面上有一个文本框，我输入位置，点击提交按钮，我想指出在 Map 上输入了位置 .

setCenter方法正确地标记了 Map 上的位置，第一次用预定义的坐标调用它 . 但是，当我为getLatLng定义的回调函数内调用时， Map 上的位置不会改变以反映用户输入的位置 .

如何解决这个问题的任何帮助将非常感激 . 以下是我的代码 .

<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

2 回答

  • 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

    您在_jQuery.ready（）函数的本地范围内将 GMap2 实例声明为 map . 然后你引用 map ，因为它是geoEncode（）函数中的全局变量 .

    回复于

相关问题