javascript - 如何将输入从 HTML <form> 传递到 Javascript 函数？

Question

我需要从 <form></form> 传递输入(纬度和经度)到一个 Javascript 函数，该函数会将点插入热图中。我想出了如何收集响应并将其存储在变量中，但现在我需要将其以某种格式附加到不同函数的列表中。

HTML 表单:

<form name="sightings" action="" method="GET">
    <input type="text" name="area" placeholder="City, Town, etc.">
    <input type="submit" value="Sighting" onClick="formResults(this.form)">
</form>

车削<input>转换为 JS 变量:

function formResults (form) {
    var areaTyped = form.area.value;
    alert ("Your data has been submitted.");
    return areaTyped;
}

我需要将变量附加到的点列表:

function getPoints() {
    var heatmapData = [
    {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
    new google.maps.LatLng(37.782, -122.445),
    new google.maps.LatLng(37.782, -122.437),
    new google.maps.LatLng(37.785, -122.443),
    new google.maps.LatLng(37.785, -122.439),
    ]
    return heatmapData;
}

数组中的每个点heatmapData需要采用 new google.maps.LatLng(Latitude, Longitude) 格式。是否可以从 HTML 表单中获取每个变量并将它们以正确的格式附加到点列表中。

热图的工作原理如下:Heatmap .

但是热点只是我手动给的点。如何连接我的 <form> 的输入到热图？

Answer 1

您可以将搜索框移动到 map 中(请参阅 Places search box sample )，然后当用户从谷歌地图搜索中选择建议时，向热图图层添加一个点并调用 heatmap.setData() 带有更新后的点数组。请参阅下面的示例:

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

var heatmapData = [
    {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
    new google.maps.LatLng(37.782, -122.445),
    new google.maps.LatLng(37.782, -122.437),
    new google.maps.LatLng(37.785, -122.443),
    new google.maps.LatLng(37.785, -122.439),
    ];
function initMap() {
  var myLatlng = new google.maps.LatLng(37.782, -122.447);

  var myOptions = {
    zoom: 6,
    center: myLatlng,
    mapTypeControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  }
  var mapCanvas = document.getElementById("map-canvas");
  var map = new google.maps.Map(mapCanvas, myOptions);
  var marker = new google.maps.Marker({
    position: myLatlng,
    title: "Hello World!"
  });

  // To add the marker to the map, call setMap();
  marker.setMap(map);
  var heatmap = new google.maps.visualization.HeatmapLayer({
          data: heatmapData,
          map: map
        });
  var input = document.getElementById('area');
  var searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  // Bias the SearchBox results towards current map's viewport.
  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });
  var markers = [];
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }

    // Clear out the old markers.
    markers.forEach(function(marker) {
      marker.setMap(null);
    });
    markers = [];

    // For each place, get the icon, name and location.
    var bounds = new google.maps.LatLngBounds();
    places.forEach(function(place) {
      if (!place.geometry) {
        console.log("Returned place contains no geometry");
        return;
      }

      heatmapData.push(place.geometry.location);
      heatmap.setData(heatmapData);

      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });
    //map.fitBounds(bounds);
  });

}

#mapContainer,
#map-canvas {
  height: 250px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places,visualization'></script>
<form name="sightings" action="" method="GET">
  <input type="text" name="area" placeholder="City, Town, etc." id="area" class="controls">
  <!-- not needed anymore: <input type="button" value="Sighting" onClick="searchMap()">-->
</form>
<div id="mapContainer">
  <div id="map-canvas"></div>
</div>