Блог

Главная - Вопросы по программированию - Как передать входные данные из HTML в функцию Javascript?

Как передать входные данные из HTML в функцию Javascript?

#javascript #html #google-maps #heatmap

#javascript #HTML #google-карты #тепловая карта

Вопрос:

Мне нужно передать входные данные (широта и долгота) из a <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-формы и добавить их в список точек в соответствующем формате.

Тепловая карта работает и выглядит следующим образом: Тепловая карта.

Но самое интересное — это только те точки, которые я задал вручную. Как мне подключить входные данные из my <form> к тепловой карте?

Комментарии:

1. кнопки отправки отправки.

Ответ №1:

Вы можете переместить окно поиска на карту (см. Пример окна поиска мест), затем, когда пользователь выберет предложение из поиска на карте 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.expamp;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>