Question

我正面临谷歌地图位置的问题。当我们点击文本框下显示的结果时，表单将被提交。当我们点击谷歌地图位置时，我们如何阻止表单提交。

这是我的js：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(-33.8902, 151.1759),
      new google.maps.LatLng(-33.8474, 151.2631));
  map.fitBounds(defaultBounds);

  var input = /** @type {HTMLInputElement} */(document.getElementById('target'));
  var searchBox = new google.maps.places.SearchBox(input);
  var markers = [];

  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }

    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location
      });

      markers.push(marker);

      bounds.extend(place.geometry.location);
    }

    map.fitBounds(bounds);
  });

  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
  });
}

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

HTML CODE：

<div id="panel">
    <form action="">
      <input id="target" type="text" placeholder="Search Box">
      <input type="submit" value="submit" name="submit">
      </form>
    </div>
    <div id="map-canvas"></div>

任何人都可以提供帮助

Answer 1

点击文本框内的回车键将导致表单被提交。解决此问题的一种方法是将提交转换为按钮并在表单中添加ID。

<form id="form1" action="">

 <input type="button" value="submit" name="submit" onclick="document.getElementById('form1').submit();">

这样可以防止页面在输入键上加总并仅在您单击按钮时提交。

谷歌地图位置结果点击问题

1 个答案: