如何從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 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中的每個點都必須采用新的google.maps.LatLng（Latitude，Longitude）格式。 是否可以從HTML表單中獲取每個變量，然后將它們以適當的格式附加到點列表中。

熱圖的工作原理如下所示： Heatmap 。

但是熱點只是我手動給出的要點。 如何將輸入從<form>連接到熱圖？

Answer 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.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>