1

私の目標は、最終的にユーザーが 2 つのテキスト ボックスに座標を入力し、フォームを送信して Google マップの中心を新しい値に変更できるようにすることです。現在、フォームの一部としてボタンを配置するだけでテストしています。ボタンをクリックすると、ハードコードされた 2 つの値を持つ関数がマップの中心を変更するはずですが、機能していません。最初のマップは正しく作成されますが、ボタンをクリックしてもマップの中心が変わりません。これがJavaScriptの私のコードです：

    var map;
    var center;
    var mapOptions;

    function reMap() {
     alert("setting the center");
     center = new google.maps.LatLng(41.4200, -73.9550);
         map.setCenter(center);
         map.setZoom(10);
    }

    function initialize() {
     document.getElementById('location').onSubmit = reMap;

         mapOptions = {
             center: new google.maps.LatLng(-34.397, 150.644),
             zoom: 8,
             mapTypeId: google.maps.MapTypeId.ROADMAP
         };
         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

     }
      google.maps.event.addDomListener(window, 'load', initialize);

ここにhtmlがあります：

    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
         html { height: 100% }
          body { height: 100%; margin: 0; padding: 0 }
          #map_canvas { height: 100% }
        </style>
        <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false">
        </script>
        <script type="text/javascript"
          src="js/mapActions.js">
        </script>
      </head>
      <body >
      <div><form id="location" action="" method="post">
       <fieldset> <input type="submit" value="try" id="try"></fieldset></form></div>
        <div id="map_canvas" style="width:100%; height:100%"></div>
      </body>
    </html>

これが機能しない理由についてのアイデアは大歓迎です。入力タイプを「ボタン」に変更し、「onClick = reMap（）」をhtmlに追加すると、実際には機能しますが、前述のように、フォームを使用できる必要があり、関数呼び出しはしたくないことに注意してくださいHTMLで。どんな助けでも大歓迎です。

4

4 に答える 4

0

はい、initialize() の 'reMap()' 割り当てという名前の関数が間違っているようです。

"document.getElementById('location').onSubmit = reMap;"

それは onsubmit() である必要があり、そうでなければ解決され、そうでなければ正常に動作します。

于 2012-12-01T08:45:00.583 に答える
0

フォームの送信アクションは、全ページをリロードするだけです。<form>...</form>タグなしでこのボタンを試してください:

<input type="button" value="Go to Chicago" id="chicago" onclick="function(){map.setCenter(new google.maps.LatLng(41.850033, -87.6500523))}">
于 2012-12-01T07:40:54.933 に答える
0 
document.getElementById('location').onSubmit = reMap;

次のように変更します。

document.getElementById('location').onsubmit = reMap;
于 2012-12-01T07:41:06.977 に答える
0

Marcelo が示したように、フォーム送信アクションはページをリロードします。あなたはできない (または提案されたソリューションを使用したくない) と言いました。送信アクションがページをリロードしないようにするには、関数は「false」を返す必要があります。

未検証：

function reMap() {
  // alert("setting the center");
  center = new google.maps.LatLng(41.4200, -73.9550);
  map.setCenter(center);
  map.setZoom(10);
  return false;
}
于 2012-12-01T13:06:14.717 に答える