如何將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（Latitu經度）。是否有可能從HTML表單中獲取我的每個變量並將它們附加到正確格式的點列表中。

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

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

Answer 1

您可以將搜索框移動到地圖中（請參閱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>