使用 Google 和 Jquery 进行地理编码答案

【问题标题】：Geocoding with Google and Jquery使用 Google 和 Jquery 进行地理编码
【发布时间】：2013-05-06 04:12:00
【问题描述】：

我是 jquery 的新手，但我现在有点困难。据我所知，最终的想法是执行以下操作：

用户输入地址并点击搜索
Google 地理编码器运行
如果没有结果则错误，或者获取坐标、州、邮编、国家、城市并在消息框中打印

我目前的代码甚至无法完成从输入框中抓取坐标的过程。它一直告诉我它需要一个支架，但无论我把支架放在哪里，我都无法让它运行。

这是我的尝试：

http://jsfiddle.net/QA7Xr/16/

完整代码如下：

 var myLatlng = new google.maps.LatLng(31.272410, 0.190898);


// INITALIZATION
 function initialize() {
     var mapOptions = {
         zoom: 4,
         center: myLatlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
 }


// GEOCODE
  function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        alert("Geocode was successful");
        };
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      };
    };
  }


// GET ADDRESS DETAILS
 function getLatLongDetail() {
     var geocoder = new google.maps.Geocoder();
     geocoder.geocode({
         'latLng': myLatlng
     },
     function (results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
             if (results[0]) {
                 var address = "",
                     city = "",
                     state = "",
                     zip = "",
                     country = "";
                 for (var i = 0; i < results[0].address_components.length; i++) {
                     var addr = results[0].address_components[i];
                     // check if this entry in address_components has a type of country
                     if (addr.types[0] == 'country') country = addr.long_name;
                     else if (addr.types[0] == 'street_address') // address 1
                     address = address + addr.long_name;
                     else if (addr.types[0] == 'establishment') address = address + addr.long_name;
                     else if (addr.types[0] == 'route') // address 2
                     address = address + addr.long_name;
                     else if (addr.types[0] == 'postal_code') // Zip
                     zip = addr.short_name;
                     else if (addr.types[0] == ['administrative_area_level_1']) // State
                     state = addr.long_name;
                     else if (addr.types[0] == ['locality']) // City
                     city = addr.long_name;
                 }
                 alert('City: ' + city + '\n' + 'State: ' + state + '\n' + 'Zip: ' + zip + '\n' + 'Country: ' + country);
             }
         }
     });
 }

 initialize();
 getLatLongDetail();

谁能告诉我哪里出错了？我已经走到了尽头。

【问题讨论】：

您查看过控制台中记录的错误吗？ Uncaught SyntaxError: Unexpected token { fiddle.jshell.net:44
纠正你的小提琴。忍受我。

标签： javascript jquery google-maps google-maps-api-3 geolocation

【解决方案1】：

你的 JS 乱七八糟，我已经收拾好了：http://jsfiddle.net/QA7Xr/19/

按顺序：

函数中有两个额外的右括号
您使用 getElementById() 使用的 ID 不存在
当 JS 分配更容易时，您绑定了 onClick
您的 geocoder 变量在 getLatLongDetail 中是本地的。您需要在 codeAddress 中使用它，所以我将其设为全局。

需要改进的地方：

将代码封装在闭包中以避免命名空间污染
使用 Google 事件来控制您的代码分配。现在，如果用户点击太快，你的代码就会抛出
简化逻辑

【讨论】：

P.S：Google 认为我在阿尔及利亚。我没有使用代理。赢了！
@Xotic750：错了。 JS 错误来自 jsFiddle，而不是来自他的代码。
你在一些乱七八糟的事情上开了个好头，但它仍然远非正确。
@Xotic750：OP 的问题是“它不会运行”，而不是“为我制造”。除了实际运行之外，我已经为他指出了正确的方向来改进他当前的代码。你挑错什么？他从未说“写我的代码”，只是“修复我的代码”。
（另外，如果我愿意，我可以在缩小之前把它写成三行。他会明白吗？不会。）

【解决方案2】：

这是更新的链接，

http://jsfiddle.net/QA7Xr/24/

geocoder.geocode({}, function(){....}); /*not closed properly*/

还有分号使用不当。

【讨论】：