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 var：

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（纬度，经度）格式。是否可以从HTML表单中获取我的每个变量，并将它们以正确的格式附加到点列表中。

热图的工作原理如下：Heatmap。

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

Answer 1

您可以将搜索框移动到地图中（请参阅Places search box sample），然后当用户从Google地图搜索中选择建议时，将一个点添加到热图图层并使用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>

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

1 个答案: