1

我的目标是最终允许用户在两​​个文本框中输入坐标，然后提交表单以使用新值更改谷歌地图的中心。我目前正在测试只是将一个按钮作为表单的一部分。单击按钮时，具有两个硬编码值的函数应更改地图的中心，但它不起作用。初始地图已正确创建，但单击按钮时地图的中心不会改变。这是我的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

正如 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 回答
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

是的，您在 initialize() 中名为“reMap()”的函数分配似乎是错误的，

“document.getElementById('location').onSubmit = reMap;”

它应该是 onsubmit()，然后它将被解决，否则工作正常。

于 2012-12-01T08:45:00.583 回答