Googleジオコーディング - 機能が動作しない

Question

設定：私は単一のマーカーと入力フィールドのセットを持つ地図を持っています。 map/init fnはウィンドウロードで実行されます。を働いて何

：逆ジオコーディング：私は&の周りのマーカーと入力フィールド（通り、NR、郵便番号、都市、国）mb_map.geocodePosition()機能を通じて更新をドラッグ＆ドロップ。

タスク：ここでは、同じ入力フィールドを使用して住所を設定し、マーカーを移動する通常のジオコーディング（Address> 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> 

ありがとう！

---

編集：コメントを1として、ここに私のマークアップです：

<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()。また、onclickイベントにreturn falseを追加することもできます。

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です。