谷歌地理编码 - 功能不起作用

Question

设置：我有一个地图有一个标记和一组输入字段。 map/init fn在窗口加载时运行。

什么工作：反地理编码：我拖累&串门的标记和输入字段（街道，NR，邮政编码，城市，国家）通过mb_map.geocodePosition()功能更新。

任务：现在我想使用相同的输入字段添加正常的地理编码（地址> latLng）来设置地址并移动标记。调用正常地理编码的功能由按钮onClick="mb_map.encodeAddress()"事件触发。

问题：由于某种原因，函数没有得到任何参数，console.log()什么也没有返回。而是重新加载页面。我在下面的代码中写了一条评论，以帮助您更轻松地找到停止工作的部分。

<script type="text/javascript"> 
    /** 
    * Global public map object & functions 
    * @since 0.1 
    */ 
    var mb_map = { 
     map:  null, 
     marker:  null, 

     geocoder: new google.maps.Geocoder(), 

     lat:  null, 
     lng:  null, 

     input: 
     { 
      street: document.getElementById('location_street') 
      ,nr:  document.getElementById('location_nr') 
      ,zip:  document.getElementById('location_zip') 
      ,city:  document.getElementById('location_city') 
      ,country: document.getElementById('location_country') 
      ,lat:  document.getElementById('location_lat') 
      ,lng:  document.getElementById('location_lng') 
     }, 


     /** 
     * Reverse Geocoding 
     * lat/lng > Address 
     * 
     * @param pos 
     * @returns (object) | Geocoded address data 
     */ 
     geocodePosition: function(pos) 
     { 
      mb_map.geocoder.geocode(
      { 
       latLng: pos 
      } 
      ,function (responses) 
      { 
       if (responses && responses.length > 0) 
       { 
        // THIS WORKS PERFECT 
        console.log(responses[0]); 
        mb_map.updateMarkerAddress(responses[0]); 
       } 
       else 
       { 
        mb_map.updateMarkerAddress('Cannot determine address at this location.'); 
       } 
      }); 
     }, 



     /** 
     * Geocoding 
     * Address > lat/lng 
     */ 
     encodeAddress: function() 
     { 
      var address_formated = 
        mb_map.input.street.value 
       + " " 
       + mb_map.input.nr.value 
       + ", " 
       + mb_map.input.zip.value 
       + ", " 
       + mb_map.input.city.value 
       + ", " 
       + mb_map.input.country.value; 

      mb_map.geocoder.geocode(
      { 
       // address: address_formated 
       // FOLLOWING LINE IS ONLY HERE, TO GET AN EASIER EXAMPLE 
       address: 'Lisbon, PT' 
      } 
      ,function(responses, status) 
      { 
       // THIS IS WHERE NOTHING WORKS 
       console.log(responses); 
       if (status == google.maps.GeocoderStatus.OK) 
       { 
        mb_map.map.setCenter(responses[0].geometry.location); 
        mb_map.updateMarkerAddress(responses[0].geometry.location); 
        mb_map.marker = new google.maps.Marker( 
        { 
         map:  mb_map.map 
         ,position: responses[0].geometry.location 
        }); 
       } 
       else 
       { 
        alert("Geocode was not successful for the following reason: " + status); 
       } 
      }); 
     }, 


     /** 
     * Update input fields on marker drop 
     * 
     * @param str 
     * @returns void 
     */ 
     updateMarkerAddress: function(str) 
     { 
      // not shown as not relevant 
     }, 


     /** 
     * Setup map & marker 
     * 
     * @constructor 
     */ 
     init: function() 
     { 
      if (navigator.geolocation) 
      { 
       navigator.geolocation.getCurrentPosition(function (position) 
       { 
        mb_map.lat  = position.coords.latitude; 
        mb_map.lng  = position.coords.longitude; 

        var latLng  = new google.maps.LatLng(mb_map.lat, mb_map.lng); 

        mb_map.map  = new google.maps.Map(document.getElementById('map-container'), 
        { 
         zoom:  8, 
         center:  latLng, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
        }); 
        mb_map.marker = new google.maps.Marker(
        { 
         position: latLng, 
         title:  'Location', 
         map:  mb_map.map, 
         draggable: true 
        }); 

        // Update current position info. 
        mb_map.geocodePosition(latLng); 
       }); 
      } 
     } 
    }; 


    /** 
    * INIT on window load 
    */ 
    google.maps.event.addDomListener(window, 'load', mb_map.init); 
</script> 

谢谢！

---

编辑：按照评论，这里是我的标记：

<div id="map-container" style="min-width: 235px; height: 300px;">loading...</div> 
<input type="submit" name="encode" id="encode" class="button-primary" value="Encode" onclick="mb_map.encodeAddress()"> 

Answer 1

你说，当你点击按钮的页面重新加载。它看起来像按钮导致回发，并在地理编码器回调函数完成之前重置地图。你使用的是ASP.Net按钮还是标准的HTML输入按钮？

在jQuery中有一个method停止回发：event.preventDefault()。或者，我相信您可以将return false添加到onclick事件中。

onClick="mb_map.encodeAddress();return false;"

UPDATE：

你有范围的问题。您address_formatted变量未定义，因为您的所有输入属性都是未定义的。

如果您尝试访问encodeAddress函数中的mb_map.input值，则它们都未定义。

你可以添加其他功能得到地址：

getAddress: function() { 
    var address = document.getElementById('location_zip').value 
        + ", " + 
        document.getElementById('location_country').value; 
    return address; 
}, 

然后更改encodeAddress函数调用新的功能：

/** 
* Geocoding 
* Address > lat/lng 
*/ 
encodeAddress: function() {  

    mb_map.geocoder.geocode({ 

     //access the inputs with a function 
     address: mb_map.getAddress() 

    }, function(responses, status) { 

     console.log(responses); 

     if (status == google.maps.GeocoderStatus.OK) { 
      mb_map.map.setCenter(responses[0].geometry.location); 
      mb_map.updateMarkerAddress(responses[0].geometry.location); 
      mb_map.marker = new google.maps.Marker({ 
       map: mb_map.map, 
       position: responses[0].geometry.location 
      }); 
     } 
     else { 
      alert("Geocode was not successful for the following reason: " 
        + status); 
     } 
    }); 
}, 

这里是它的工作的fiddle。